CSS 动画

CSS 动画 (animation) 比过渡 (transition) 更强大。过渡只能定义从开始状态到结束状态的简单变化，而动画可以创建包含多个中间步骤的复杂序列。

创建 CSS 动画主要分为两步：

1. 定义动画: 使用 @keyframes 规则来定义动画的序列和关键帧。
2. 应用动画: 将 @keyframes 动画应用到一个元素上，并配置其行为（如持续时间、重复次数等）。

@keyframes 规则

@keyframes 规则用于定义动画在不同时间点的状态。你可以使用 from 和 to 关键字来定义开始 (0%) 和结束 (100%) 的状态，或者使用百分比来定义任意多个中间状态。

/* 定义一个名为 'slide-in' 的动画 */
@keyframes slide-in {
  from { /* 0% */
    transform: translateX(-100%);
    opacity: 0;
  }
  to { /* 100% */
    transform: translateX(0);
    opacity: 1;
  }
}

/* 定义一个名为 'pulse' 的多步动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

应用动画的属性

animation-name

指定要应用到元素上的 @keyframes 动画的名称。

div {
  animation-name: slide-in;
}

animation-duration

指定动画完成一个周期所需的时间（单位 s 或 ms）。

div {
  animation-duration: 2s;
}

animation-timing-function

设置动画的速度曲线，与 transition-timing-function 的值相同 (ease, linear, ease-in-out, etc.)。

animation-delay

设置动画在应用到元素后，等待多久才开始播放。

animation-iteration-count

设置动画的播放次数。

• <number>: 播放指定的次数。
• infinite: 无限次循环播放。

div {
  animation-iteration-count: infinite;
}

animation-direction

设置动画在每个周期结束后是否反向播放。

• normal: (默认) 每个周期都从头到尾正常播放。
• reverse: 每个周期都反向播放（从 100% 到 0%）。
• alternate: 动画轮流正向和反向播放。奇数次（1, 3, 5...）正向播放，偶数次（2, 4, 6...）反向播放。
• alternate-reverse: 动画轮流反向和正向播放。

animation-fill-mode

定义动画在播放之前和之后，元素的样式状态。

• none: (默认) 动画结束后，元素会恢复到其原始样式。
• forwards: 动画结束后，元素会保持动画最后一帧的样式。
• backwards: 动画有延迟时，在延迟期间，元素会立即应用动画第一帧的样式。
• both: 同时应用 forwards 和 backwards 的效果。

animation-play-state

允许你暂停和恢复动画。

• running: (默认) 动画正在播放。
• paused: 动画被暂停。

.element:hover {
  animation-play-state: paused; /* 鼠标悬停时暂停动画 */
}

animation (简写属性)

最佳实践是使用 animation 简写属性。顺序如下：

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

div {
  animation: pulse 2s ease-in-out infinite;
}

CSS 动画为网页设计师和开发者提供了一个功能强大且性能优越的工具，用于创建引人入胜的动态用户体验。