CSS属性 - animation

一、基本概念

animation是 CSS 中的一个属性，用于将通过@keyframes规则定义的动画应用到元素上。它是一种简写属性，能够在一个声明中设置多个动画相关的子属性。

二、语法结构

基本语法为：

animation: name duration timing - function delay iteration - count direction fill - mode play - state;

name：

这是必需的，是通过@keyframes定义的动画名称。例如，如果有@keyframes myAnimation {...}，那么这里就写myAnimation。

duration：

指定动画完成一个周期所需要的时间，以秒（s）或毫秒（ms）为单位。例如，3s表示动画持续 3 秒。

timing - function：

定义动画的速度曲线，用于描述动画在每一帧的速度变化。常见的取值有：

ease（默认值）：动画开始和结束时较慢，中间快。

linear：动画以恒定速度进行。

ease - in：动画开始时慢，然后逐渐加快。

ease - out：动画开始时快，然后逐渐减慢。

ease - in - out：动画开始和结束时慢，中间快，类似于ease，但变化更平缓。

delay：

指定动画开始前的延迟时间，同样以秒（s）或毫秒（ms）为单位。例如，1s表示动画会在 1 秒后开始。

iteration - count：

定义动画的循环次数。可以是具体的数字，如3表示循环 3 次；也可以是infinite，表示无限循环。

direction：

确定动画的播放方向。取值如下：

normal（默认值）：动画按照正常顺序播放（从@keyframes中的起始关键帧到结束关键帧）。

reverse：动画按照相反顺序播放（从结束关键帧到起始关键帧）。

alternate：动画在偶数次循环时反向播放，奇数次循环时正向播放。

alternate - reverse：与alternate相反，动画在偶数次循环时正向播放，奇数次循环时反向播放。

fill - mode：

规定动画在播放之前和之后如何应用样式。取值包括：

none（默认值）：动画在执行之前和之后不会对元素应用任何样式。

forwards：动画结束后，元素将保留动画结束时的样式。

backwards：动画在延迟期间，元素将应用动画开始时的样式。

both：结合了forwards和backwards的效果，在延迟期间应用开始样式，动画结束后保留结束样式。

play - state：

用于控制动画的播放状态，可以取值为running（默认值，动画正常播放）或paused（动画暂停）。例如，可以通过 JavaScript 来切换这个值，从而暂停或恢复动画。