CSS 动画主要有两大类方案：

过渡动画 (Transition)

用于元素 状态切换 时的平滑过渡。

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 0.3s ease;
}

.box:hover {
  width: 200px;
  background: blue;
}

• 适合 从一个状态到另一个状态 的过渡（比如 hover、点击、类名切换）。
• 优点：简单易写，性能好。
• 缺点：只能在状态切换时触发，不能循环播放。

关键帧动画 (Keyframes)

用于定义复杂的动画效果，可以控制动画的每一帧。

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background: green;
  animation: move 2s infinite ease-in-out;
}

• 可以定义多个关键帧，控制动画的每个阶段。
• 适合 循环动画（例如 Loading 效果、轮播图）。

注

• 优先使用 transform 和 opacity，避免频繁触发重排（layout）和重绘（paint）
• 尽量让 GPU 参与：will-change: transform, opacity;

只能使用 transition 的场景

用户交互触发的即时反馈（hover、点击等状态切换）

注

为什么 animation 不行？

• animation 必须预先定义好 @keyframes，无法自动根据「当前值 → 新值」做过渡。
• 比如背景色 hover 从 #409eff → #66b1ff，如果用 animation，你必须写死 from 和 to，而 transition 能自动识别。

属性值不固定的动态变化

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.panel.open {
  max-height: 500px; /* 只要比实际内容大就行 */
}

总结

transition 优势：自动识别「当前状态 → 新状态」，不需要你知道起点。所以只要涉及 状态切换、未知起点的过渡，那就是 transition 独有场景。

animation 优势：可以定义多个关键帧，控制动画的每个阶段。所以只要涉及 复杂动画、循环动画，那就是 animation 独有场景。

特性 / 场景	Transition	Animation
是否需要定义关键帧	❌ 不需要，自动从当前状态 → 目标状态	✅ 需要 @keyframes 明确写出起点和终点
是否必须知道起点值	❌ 不需要（浏览器自动取当前值）	✅ 必须写死起点/终点
适合的触发方式	用户交互（hover、focus、active、checked）、类名切换、DOM 挂载/卸载	自动执行、循环播放、复杂的阶段性动画
是否支持循环	❌ 不支持循环	✅ 可以用 infinite 无限循环
是否支持多个阶段	❌ 只有「起点 → 终点」	✅ 可以定义任意多关键帧 (0% → 100%)
典型场景	- 按钮 hover 变色 - 折叠面板展开/收起 - Modal 淡入淡出 - 路由过渡	- Loading 动画（旋转、跳动） - Banner 轮播切换 - 骨架屏 - 动画 Logo 展示
灵活性	简单，主要用于状态切换	高度可控，适合复杂效果
代码量	少	多，需要额外写 @keyframes
动态值支持	✅ 可以从「未知值」过渡	❌ 必须预设死数值