动画
- animation-name 指定动画的名字
- animation-duration 一次动画执行的时间
- animation-iteration-count 动画执行的次数
- animation-delay 动画的延时
- animation-timing-function 时间函数
- animation-direction 动画的方向
- 可选值:
- normal 默认值
- reverse 动画反向执行
- alternate 动画正向反向交替执行
- alternate-reverse 和alternate相反
- animation-fill-mode 动画的填充模式
- 可选值:
- none 默认值 延迟时元素保持不变,动画执行结束恢复原状
- forwards 延迟时元素保持不变,动画执行结束保持to的状态
- backwards 延迟时元素变为from状态,动画执行结束恢复原状
- both 延迟时元素变为from状态,动画执行结束保持to的状态
- animation-play-state 动画的播放状态
- animation 简写属性可以同时设置所有动画相关的样式
- 通过keyframeas来定义关键帧
- from 表示动画的开始位置
- to 表示动画的结束位置
- 也可以使用百分比数值
- 设置steps时,from第一下不算是第一步