面试题：CSS 中 transition 和 animation 的区别

transition（过渡）和 animation（动画）是 CSS3 中实现动态效果的两大核心机制。虽然它们都能让元素“动”起来，但在使用方式、控制能力和适用场景上有显著区别。

---

一、核心概念对比

特性	transition（过渡）	animation（动画）
触发方式	需要状态变化（如 :hover, :focus, JS 修改 class）	自动播放或通过 animation-play-state 控制
关键帧支持	❌ 不支持	✅ 支持（@keyframes）
播放次数	只能从 A 到 B 或 B 到 A（来回算两次）	可设置任意次数（infinite 无限循环）
时间控制	简单的 duration 和 delay	支持 delay, iteration-count, direction, play-state 等
复杂度	简单，适用于两个状态间的平滑变化	复杂，可定义多阶段、非线性的动画
是否脱离文档流	否	否（但可通过 transform 提升为合成层）

---

二、详细解释

1. transition：状态之间的平滑过渡

• 作用：定义一个属性从一个值到另一个值的变化过程。
• 必须条件：
  • 元素有初始状态和结束状态。
  • 状态变化由用户交互（如 hover）或 JavaScript 触发。
• 语法：

.box {
    width: 100px;
    transition: width 0.5s ease-in-out 0.1s; /* property duration timing-function delay */
  }

  .box:hover {
    width: 200px; /* 触发 transition */
  }

• 特点：
  • 只能定义“开始 → 结束”和“结束 → 开始”两种路径。
  • 无法定义中间状态或循环播放。
  • 性能好，适合简单的悬停、展开等效果。

2. animation：独立运行的关键帧动画

• 作用：通过 @keyframes 定义一系列关键帧，描述元素在整个动画周期中的变化。
• 独立运行：一旦应用，动画会自动开始（除非设置 animation-delay 或 animation-play-state: paused）。
• 语法：

@keyframes slide {
    0%   { transform: translateX(0); opacity: 0; }
    50%  { transform: translateX(100px); opacity: 1; }
    100% { transform: translateX(200px); opacity: 0.5; }
  }

  .box {
    animation: slide 2s ease-in-out 0.5s infinite alternate;
  }

• 特点：
  • 可定义多个关键帧（0%, 25%, 50%, 100% 等）。
  • 支持循环播放（infinite）、反向播放（alternate）。
  • 动画逻辑完全独立于元素的状态。

---

三、使用场景对比

✅ 使用 transition 的场景：

• 按钮悬停效果：颜色、背景、阴影变化。
• 下拉菜单：高度或透明度的渐变展开/收起。
• 表单输入：聚焦时边框颜色变化。
• 任何需要“响应式”动画：即动画由用户操作触发。

💡 口诀：transition 是“状态变了，就动一下”。

✅ 使用 animation 的场景：

• 加载动画（Loading Spinner）：无限旋转的图标。
• 弹跳、闪烁、呼吸灯效果：需要复杂节奏或多阶段变化。
• 页面进入动画：元素入场、淡入、滑动。
• 自动轮播图：图片自动切换。
• 游戏或交互动画：复杂的视觉反馈。

💡 口诀：animation 是“不管怎样，我都要动”。

---

四、性能与最佳实践

• 优先使用 transform 和 opacity：
  • 无论是 transition 还是 animation，都应尽量对 transform 和 opacity 属性做动画，因为它们触发的是 GPU 加速的合成（Composite），性能最好。
  • 避免对 top/left/width/height 等布局属性做动画，会触发重排（Reflow）。
• will-change 提示：
  • 对频繁动画的元素，可使用 will-change: transform; 提前告知浏览器，促使其创建合成层。
• 控制播放状态：
  • 使用 animation-play-state: paused / running 可以暂停/恢复动画。
  • transition 无法暂停，只能通过控制状态来中断。

---

五、总结

选择依据	推荐方案
是否由用户交互触发？	是 → transition，否 → animation
是否需要无限循环？	是 → animation
是否需要多个中间状态？	是 → animation
是否简单地在两个状态间切换？	是 → transition

一句话概括：

• transition 是被动的、状态驱动的过渡效果。
• animation 是主动的、时间驱动的完整动画序列。

在实际开发中，两者常常结合使用，共同构建丰富、流畅的用户体验。