在 CSS 中，transition 和 animation 分别用于实现什么效果？请从触发条件、控制粒度、循环能力、中间帧控制等角度说明两者的核心差异，并各举一个典型使用场景。

回答思路

1. 【回答框架 1】transition 是简单的状态过渡，需要事件或状态改变（如 hover、class 切换）触发，只能定义起始和结束两态的中间过渡过程，由浏览器自动计算中间帧。动画控制粒度较粗，无法对中间帧做精细控制。
2. 【回答框架 2】animation 更适合复杂动画，通过 @keyframes 定义多个关键帧，可精确控制任意中间状态。支持更多属性如 animation-delay、animation-iteration-count、animation-direction、animation-fill-mode 等，可实现循环、倒放、暂停等效果，且可自动播放，无需外部事件触发。
3. 【回答框架 3】典型场景：transition 适用于简单的 UI 交互反馈，如按钮 hover 变色、下拉菜单展开等；animation 适用于加载动画、强调效果、持续循环的装饰动画等。
4. 【回答框架 4】性能方面，两者都应优先使用 transform 和 opacity 进行动画，配合 will-change 可提升性能，避免引起重排和重绘。
5. 【关键点 1】transition 需要事件或状态变化触发，animation 可以自动或延迟播放。
6. 【关键点 2】animation 通过 @keyframes 支持多关键帧和精细控制，transition 只能定义两态过渡。
7. 【关键点 3】animation 支持循环、倒放、填充模式等高级特性，transition 不支持。
8. 【关键点 4】两者都推荐使用 transform 和 opacity 实现动画以提升性能。
9. 【易错点 1】误以为 transition 可以循环播放，实际需要借助 JS 或状态切换。
10. 【易错点 2】忽略 animation-fill-mode 可能导致动画结束后元素状态回到初始。
11. 【易错点 3】过度使用 will-change 可能导致内存占用增加，应只在需要时使用。