CSS Animations 是什么

CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。

animation 属性

• animation-delay 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
• animation-direction 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
• animation-duration 设置动画一个周期的时长。
• animation-iteration-count 设置动画重复次数， 可以指定infinite无限次重复动画
• animation-name 指定由@keyframes描述的关键帧名称。
• animation-play-state 允许暂停和恢复动画。
• animation-timing-function 设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
• animation-fill-mode 指定动画执行前后如何为目标元素应用样式。

animation 简写属性属性

• animation CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

定义动画规则

• @keyframes 定义动画的表现， 0%（from）表示动画的第一时刻，100%（to）表示动画的最终时刻,也可包含额外可选的关键帧，描述动画开始和结束之间的状态。 这比 CSS Transitions 更能控制动画序列的中间步骤.

【笔记不易，如对您有帮助，请点赞，谢谢】