（过渡）和 （动画）都是 CSS3 中用于实现元素动态效果的属性，但它们的设计目的、控制粒度和使用场景有很大的区别。 简单来说：Transition 是“从 A 到 B 的平滑变化”，而 Animation 是“自导自演的复杂剧本”。 以下是它们的详细区别对比： 1. 核心区别总结 | 特性 | Transition (过渡) | Animation (动画) | | :--- | :--- | :--- | | 触发方式 | 被动触发。需要状态变化（如 、、JS 修改 class）才能启动。 | 主动触发。可以自动运行，也可以通过状态触发。 | | 状态数量 | 只有两个状态：开始状态和结束状态。 | 多个状态：通过关键帧 () 定义任意数量的中间状态 (0% -> 50% -> 100%)。 | | 循环能力 | 不能自动循环。通常运行一次就结束（除非反复触发）。 | 支持循环。可以设定无限循环 () 或指定次数。 | | 控制能力 | 较弱。只能控制时长、延迟、缓动函数。 | 很强。可以暂停 ()、反向播放 ()、保持结束状态 () 等。 | | 复杂度 | 简单易用，代码...
播面