如何使用 CSS3 实现动画 (Animation)？请解释 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode 和 animation-play-state 各自的作用。-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

CSS3 Animation 模块提供了强大的动画能力，允许开发者创建复杂的视觉效果而无需依赖 JavaScript。理解 animation 属性及其各个子属性对于掌握 CSS 动画至关重要。

@keyframes 规则

在开始讨论 animation 属性之前，必须先了解 @keyframes 规则。它定义了动画的中间状态或关键帧。例如，一个简单的移动动画可能如下所示：

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

这段代码定义了一个名为 slideIn 的动画，它从元素在 X 轴上移动到 -100% 的位置开始，然后移动到 0 的位置。关键帧可以使用 from 和 to 关键字（分别对应 0% 和 100%）或者使用百分比值来定义。

animation 属性的详细解读

animation-name:
此属性就像一个“链接”，将定义的 @keyframes 动画与一个或多个 CSS 元素相关联。例如，如果我们想将上述的 slideIn 动画应用于一个 div 元素，我们就可以使用 animation-name: slideIn;。
animation-duration: animation-duration 控制动画完成一个完整循环所需的时间。例如， animation-duration: 2s; 表示动画将花费 2 秒钟完成一个完整的播放周期。
animation-timing-function:
这个属性决定了动画播放的速度曲线。
- linear 产生匀速动画。
- ease 产生一个缓慢开始，然后加速，最后又缓慢结束的动画效果。
- ease-in 产生一个缓慢开始的动画。
- ease-out 产生一个缓慢结束的动画。
- ease-in-out 产生一个缓慢开始和结束的动画。
- cubic-bezier(x1, y1, x2, y2) 允许开发者自定义贝塞尔曲线来控制动画速度。
animation-delay: animation-delay 指定动画在加载后延迟多久开始播放。例如 animation-delay: 1s; 表示动画会在加载 1 秒后开始播放。
animation-iteration-count: 此属性设置动画重复播放的次数。使用 infinite 值可使动画无限循环播放。例如， animation-iteration-count: 3; 表示动画将重复播放三次。
animation-direction: animation-direction 可以控制动画的播放方向。
- normal (默认值): 动画按定义的顺序正常播放。
- reverse: 动画从最后一帧向第一帧反向播放。
- alternate: 动画在每次循环中交替方向，即先正向播放，然后反向播放，以此类推。
- alternate-reverse: 与 alternate 类似，但起始是反向播放。
animation-fill-mode: animation-fill-mode 控制动画在播放之前或之后如何应用样式。
- none (默认值)：动画不会在播放之前或之后影响元素样式。
- forwards：动画在播放结束后会保留最后一帧的样式。
- backwards：动画在开始播放之前会立即应用第一帧的样式。
- both: 同时应用 forwards 和 backwards 规则。
animation-play-state: animation-play-state 允许我们控制动画的运行状态。
- running (默认值): 动画正常播放。
- paused：动画暂停播放。这对于用户交互控制动画十分有用。

通过组合这些属性，可以创建各种复杂且精细的动画效果。animation 属性可以使用简写形式，例如：

animation: slideIn 2s ease-in-out 1s 2 alternate forwards;

这个简写形式相当于：

animation-name: slideIn;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: alternate;
animation-fill-mode: forwards;

如何使用 CSS3 实现动画 (Animation)？请解释 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode 和 animation-play-state 各自的作用。

推荐答案

本题详细解读