本文介绍了CSS动画的两种定义方式，并详细解析了animation属性，包括动画名称、时长、速度曲线、延迟时间、重复次数和执行方向等关键概念。强调了在设置时的注意事项，如必须指定动画名称和时长，以及如何通过关键字如linear、infinite、alternate和forwards控制动画行为。此外，还提到了使用steps实现逐帧动画的方法。
一、动画的使用分两步：
- 定义动画
- 调用动画
第一种写法：
第二种写法：（百分比相对于时间来说的）
二、动画属性
animation：动画名称 持续时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态
注意：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
- 动画时长和延迟时间别忘了带单位
- linear 让动画匀速执行（速度曲线）
- infinite 无限循环动画（重复次数）
- alternate 为反向 就是左右来回执行动画（跑马灯）
- forwards 让动画停留在最后一帧状态
- 使用steps实现逐帧动画
扫一扫
3686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
