下面是一些经常用到的动画属性:
- animation-name:指定要绑定关键帧(动画)的名字
- animation-duration:指定动画多少毫秒或秒完成
- animation-timing-function:设置动画将如何完成(动画的速度)一个周期
- animation-delay:设置动画开始时的延迟时间
- animation-iteration-count:定义动画的播放次数
- animation-fill-mode:规定动画不播放时的样式
- animation-play-state:指定动画是否正在运行或停止
接下来对一些属性值的设置做些详细的解释:
- 设置动画在2s完成
animation-duration:2s;
- 设置动画从开始到结束形同的速度
animation-timing-function:linear; 默认值为:ease
linear –从头到尾速度相同
ease –默认值,以慢速开始,然后加快,在结束前变慢
ease-in –以低速开始
ease-out –以低速结束
ease-in-out –以低速开始和结束
- 设置动画延迟2s开始
animation-delay:2s;
- 设置动画播放3次
animation-iteration-count:3; 默认值为1
infinite -- 无限次
- 把物体动画从一个地方移到另一个地方并停留在那里
animation-fill-mode:forwards
none –默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
backwards –动画结束后停留在开始时的样式
both –遵循forwards和backwards的规则,动画会在两个方向上扩展属性
- 暂停动画
animation-play-state:paused;
running – 指定正在运行的动画,默认值
paused – 指定暂停动画