HTML中动画的常用属性
/* 调用动画👇 */
animation-name: move;
/* 完成所需时间👇 */
animation-duration:5s;
/* 运动曲线 默认ease是慢快慢,linear是匀速*/
animation-timing-function: ease;
/* 开始时间 */
animation-delay: 0.1s;
/* 播放次数 indinite为无限*/
animation-iteration-count: 3;
/* 结束后是否逆向播放 alternate为是 normal为否*/
animation-direction: alternate;
/*结束状态 backwards为默认 forwards为停住不回去*/
animation-fill-mode: backwards;
简写方法
/* 简写 名字 时间 曲线 开始时间 次数 逆向还原 结束状态是否回去*/
animation: move 2s linear 2s 999 alternate forwards ;
特殊属性
/* 播放状态,常用于鼠标移入控制 默认running 停下为paused */
animation-play-state: paused;
学习后自己写的一点简易动画:
.donghua {
width: 100px;
height:100px;
background-color: #940505;
animation: move 2s linear 2s 999 alternate forwards;
position: absolute;
top: 35%;
left: 35%;
animation: move 2s linear 999 alternate forwards;
@keyframes move {
/* 定义动画0-100% */
0% {
}
25% {transform: translate(500px,0) rotate(-360deg) scale(1.5);
}
50% {transform: translate(500px,500px) rotate(-720deg) scale(0.5);
}
75% {transform: translate(0,500px) rotate(-1080deg) scale(1.5);
}
100% {
transform: translate(0) rotate(-1440deg) scale(0.5);
}
}