transition需状态变化触发，如hover，适用于简单属性渐变；2. animation通过@keyframes定义关键帧，可自动播放，支持复杂动画序列；3. animation提供更精细的播放控制，如延迟、循环、方向等；4. 两者兼容性良好，但建议优先使用transform和opacity以提升性能。
CSS 动画（animation）和过渡（transition）都能实现元素的视觉变化效果，但它们在使用方式、控制能力和适用场景上有明显区别。理解两者的差异有助于更合理地选择实现方式。
1. 触发方式不同
transition 需要状态改变才能触发，比如鼠标悬停（:hover）、焦点（:focus）或类名变化（JavaScript 添加/移除 class）。它描述的是从一个状态到另一个状态之间的中间过程。
animation 则不需要用户交互也能自动播放，通过 @keyframes 定义关键帧，元素加载后即可运行，也可以通过 class 控制播放状态。
例如：
立即学习“前端免费学习笔记（深入）”；
- 用 transition 实现按钮 hover 变色：只有鼠标移上去才会开始过渡。
- 用 animation 实现心跳动画：页面一加载就开始跳动，无需任何操作。
2. 控制精细度不同
transition 只能定义起始和结束两个状态之间的变化过程，不能控制中间步骤。它适用于简单的属性渐变，如 opacity、transform、color 等。
animation 借助 @keyframes 可以设置多个关键帧（0%、50%、100%），精确控制每一时刻的样式，实现复杂动画序列。
举例来说：
- 让一个盒子左右晃动一次：用 transition 很难实现完整周期，而 animation 可以在 keyframes 中清晰定义路径。
- 实现 loading 旋转+缩放组合动画：必须使用 animation 才能同时操控多个属性在不同时间点的变化。
3. 播放控制能力不同
transition 的播放是被动的，依赖于属性值的变化。一旦触发条件消失（如移出鼠标），动画可能反向执行或中断。
animation 提供更多控制选项，如：
- animation-delay：延迟播放
- animation-iteration-count：重复次数（可设 infinite）
- animation-direction：播放方向（正向、反向、交替）
- animation-play-state：暂停/继续动画
这些让 animation 更适合制作定时、循环或交互式动画。
4. 兼容性与性能考量
两者现代浏览器支持都很好，但在性能方面建议：
- 优先使用 transform 和 opacity 配合 transition，因为这些属性由 GPU 加速，性能更优。
- 避免对 width、height、margin 等触发重排的属性做 transition 或 animation，容易造成卡顿。
- 复杂动画推荐用 animation + transform 组合，既灵活又高效。
基本上就这些。transition 适合简单、交互驱动的状态过渡；animation 更强大，适合复杂、自控节奏的动画效果。根据实际需求选择，才能写出简洁高效的 CSS 动画代码。
