【CSS】Animation 属性复习

animation 属性是 【animation-name】【animation-duration】【animation-timing-function】【animation-delay】【animation-iteration-count】【animation-direction】【animation-fill-mode】【animation-play-state】的一种简写形式

1. animation-name

　　动画名称

2. animation-duration

　　完成一个动画周期需要的时间 eg: 2s / 2000ms

3. animation-timing-function

　　动画在每个周期的持续时间内如何运行  默认 ease  动画在中间加速，在结束时减速。

　　1/ ease | ease-in | ease-out | ease-in-out

　　2/ linear 等同于 cubic-bezier(0.0, 0.0, 1.0, 1.0)，表示动画以匀速运动。

　　3/ step(n, jumpterm)  这里全是我的个人理解 我也没有太搞懂

　　　　start - 跳过 第一帧变化 等同于 jump-start  eg:  step(5, start) 动画一共有5帧 且从第二帧开始

　　　　end - 跳过最后一帧变化 等同于 jump-end 动画一共有5帧 且到第4帧结束

　　　　// ----------------这里其实我都没太看懂了---------------------

　　　　jump-start  表示一个左连续函数，因此第一个跳跃发生在动画开始时。

　　　　jump-end   表示一个右连续函数，因此最后一个跳跃发生在动画结束时。

　　　　jump-none  两端都没有跳跃。相反，在 0% 和 100% 标记处分别停留，每个停留点的持续时间为总动画时间的 1/n。

　　　　jump-both  在 0% 和 100% 标记处停留，有效地在动画迭代过程中添加一个步骤。

　　　　step-start 等同于 steps(1, jump-start)  直接最后一帧

　　　　step-end 等同于 steps(1, jump-end) 第一帧并结束

　　4/ 贝塞尔曲线 cubic-bezier(0.1, -0.6, 0.2, 0)

4. animation-delay

　　指定从动画开始执行之前的等待时间

　　eg: 1s | 1000ms | -1s

　　负值会导致动画立即开始，但是从动画循环的某个时间点开始。例如，如果你将 -1s 作为动画延迟时间，则动画将立即开始，但是将在动画序列的第 1 秒开始。

5. animation-iteration-count

　　设置动画序列在停止前应播放的次数  默认值 1

　　一般常用的应该就是 默认值 和 infinite (无限)

6. animation-direction

　　设置动画是应正向播放、反向播放还是在正向和反向之间交替播放

　　1/ normal 默认值 正向

　　2/ reverse 反向

　　3/ alternate 正反交替 第一次正向

　　4/ alternate-reverse  正反交替 第一次反向

7. animation-fill-mode

　　动画在执行之前和之后如何将样式应用于其目标。

　　1/  none 默认值 不将样式应用于目标

　　2/ forwards 最后一帧的样式  最后一帧取决于【animation-direction】和【animation-iteration-count】的值

　　3/ backwards 第一帧的样式  第一帧取决于【animation-delay】和【animation-direction】的值

　　4/ both 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

8. animation-play-state 

　　设置动画是运行还是暂停。

　　1/ running 运行

　　2/ paused  暂停