transition通过状态变化触发动效，适用于简单交互反馈；2. animation基于@keyframes独立运行，支持复杂关键帧与循环，适合连续动画；3. 推荐transition用于用户交互过渡，animation用于自动播放或精细控制，优先使用transform和opacity以优化性能。
CSS中的transition和animation都能实现元素的动效，但它们在使用场景、控制方式和功能复杂度上有明显区别。理解两者的差异有助于更合理地选择动效方案。
1. 动效触发方式不同
transition依赖状态变化来触发动效，比如:hover、:focus或通过JavaScript添加/移除类名。
- 必须有属性值的变化（如从opacity:0到opacity:1）才会生效
- 只能定义起始和结束状态之间的过渡过程
- 无法控制中间过程的关键帧
animation通过预定义的@keyframes规则独立运行，不依赖用户交互也能自动播放。
- 可设置动画循环、延迟、方向等参数
- 支持多个关键帧，能描述复杂的中间状态变化
- 即使没有用户操作，也能按设定自动执行
2. 控制粒度与灵活性对比
transition语法简洁，适合简单交互反馈。
立即学习“前端免费学习笔记（深入）”；
例如：按钮悬停变色、菜单滑入等基础效果- 只能监听已声明属性的值变化
- 每个属性需单独配置持续时间与缓动函数
animation提供更精细的控制能力。
- 可在@keyframes中定义0%、50%、100%等多个阶段样式
- 支持animation-play-state暂停/恢复动画
- 可设置infinite无限循环或alternate往返播放
3. 性能与适用场景建议
两者都利用浏览器合成层优化性能，但推荐使用原则如下：
- 用
transition处理用户交互引发的短时过渡（如展开折叠） - 优先对transform和opacity做transition，避免触发重排
- 用
animation实现无需交互的连续动画或精确时序控制 - 复杂序列动画建议结合JavaScript控制animation-delay或CSS变量
