一、定义
动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数,百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%,0% 是动画的开始,100% 是动画的完成。
二、创建动画
2.1 用百分比设置动画进度
@keyframes mymove{
0%{初始状态属性}
50%(中间再可以添加关键帧)
100%{结束状态属性}
}
2.2 用from 和 to 表示进度
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
三、动画属性
我们在用@keyframes 创建动画后,要在元素里面使用animation属性进行设置,属性有:
animation-name:指定动画的名字;
animation-duration:指定动画时间,从开始到结束花费的时间;
animation-timing-function:指定动画的运动曲线;
animation-delay:指定动画延迟时间,设置动画在多少秒之后开始;
animation-iteration-count:指定动画播放的次数,默认为1;
animation-direction:规定动画是否在下一周期逆向地播放,默认是 "normal";
animation-play-state:规定动画是否正在运行或暂停。默认是 "running";