动画 在 CSS 中
允许您为几乎任何其他属性设置动画的 CSS 属性
新增！我的 44 页电子书“CSS 在 44 分钟内”已出版！ 😃
#animation-delay
定义动画在开始之前需要等待多长时间。动画仅在其第一次迭代时被延迟。
默认值 animation-delay: 0s;
动画将等待零秒，因此会立即开始。
animation-delay: 1.2s;
您可以使用小数表示秒，并使用关键字s。
animation-delay: 2400ms;
您可以使用毫秒代替秒，并使用关键字ms。
animation-delay: -500ms;
您可以使用负值：动画将开始，就像它已经播放了500ms一样。
#animation-direction
定义动画播放的方向。
默认值 animation-direction: normal;
动画向前播放。当它到达末尾时，它从第一个关键帧重新开始。
animation-direction: reverse;
动画向后播放：从最后一个关键帧开始，在第一个关键帧结束。
animation-direction: alternate;
动画首先向前播放，然后向后播放
- 从第一个关键帧开始
- 在最后一个关键帧停止
- 重新开始，但从最后一个关键帧开始
- 在第一个关键帧停止
animation-direction: alternate-reverse;
动画首先向后播放，然后向前播放
- 从最后一个关键帧开始
- 在第一个关键帧停止
- 重新开始，但从第一个关键帧开始
- 在最后一个关键帧停止
#animation-duration
定义动画持续多长时间。
默认值 animation-duration: 0s;
默认值为零秒：动画根本不会播放。
animation-duration: 1.2s;
您可以使用小数表示秒，并使用关键字s。
animation-duration: 2400ms;
您可以使用毫秒代替秒，并使用关键字ms。
#animation-fill-mode
定义动画开始之前和结束之后发生的事情。填充模式允许告诉浏览器动画的样式是否也应该在动画外部应用。
默认值 animation-fill-mode: none;
动画样式不会影响默认样式：元素在动画开始之前设置为其默认状态，并在动画结束之后恢复到该默认状态。
animation-fill-mode: forwards;
在动画结束时应用的最后一个样式将之后保留。
animation-fill-mode: backwards;
动画的样式将在动画实际开始之前应用。
animation-fill-mode: both;
样式在动画播放之前和之后应用。
#animation-iteration-count
定义动画播放多少次。
默认值 animation-iteration-count: 1;
动画只会播放一次。
animation-iteration-count: 2;
您可以使用整数来定义动画将播放的特定次数。
animation-iteration-count: infinite;
通过使用关键字infinite，动画将无限期播放。
#animation-name
定义要使用哪个动画关键帧。
默认值 animation-name: none;
如果未指定动画名称，则不会播放任何动画。
animation-name: fadeIn;
如果指定了名称，则将使用与该名称匹配的关键帧。
例如，fadeIn动画如下所示
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}animation-name: moveRight;
另一个示例：moveRight动画
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}#animation-play-state
定义动画是否正在播放。
默认 animation-play-state: running;
如果定义了animation-duration 和 animation-name，动画将自动开始播放。
animation-play-state: paused;
动画在第一个关键帧处暂停。
这与根本没有animation-duration 或 animation-name 不同。如果动画暂停，则应用的样式为第一个关键帧的样式，而不是默认样式。
在这个例子中，正方形默认可见，但在fadeAndMove的第一个关键帧中，opacity被设置为0。暂停时，动画将“卡”在第一个关键帧上，因此将不可见。
@keyframes fadeAndMove {
from {
opacity: 0;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100px);
}
}#animation-timing-function
定义如何计算动画开始和结束之间的值。
默认 animation-timing-function: ease;
动画开始缓慢，中间加速，最后减速。
animation-timing-function: ease-in;
动画开始缓慢，然后逐渐加速直到结束。
animation-timing-function: ease-out;
动画开始迅速，然后逐渐减速直到结束。
animation-timing-function: ease-in-out;
类似于ease，但更明显。
动画开始迅速，然后逐渐减速直到结束。
animation-timing-function: linear;
动画以恒定速度进行。
animation-timing-function: step-start;
动画立即跳转到最终状态。
animation-timing-function: step-end;
动画保持在初始状态直到结束，然后立即跳转到最终状态。
animation-timing-function: steps(4, end);
通过使用带整数的steps()，可以定义到达结束前的特定步数。元素的状态不会逐渐变化，而是在单独的时刻从一个状态跳转到另一个状态。
#animation
是animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode 和 animation-play-state的简写属性。
只有animation-duration 和 animation-name 是必需的。