优先用transition处理简单状态切换，如hover、toggle；需多步变化、循环或复杂时序时用animation。二者可共存，但需注意性能、兼容性及无障碍支持。
复杂动画逻辑用 @keyframes + animation，简单状态切换（比如悬停、点击）优先用 transition。
什么时候该用 transition
适合两个状态之间的平滑变化：比如按钮 hover 时颜色变深、菜单展开收起、开关 toggle 等。它监听属性变化，自动补间，写法轻量。
- 只需定义「起始」和「结束」状态，浏览器自动计算中间帧
- 触发依赖 CSS 类切换或伪类（如
:hover、:focus），不需 JS 控制流程 - 支持延迟、持续时间、缓动函数，但不能控制关键帧或循环次数
- 例如：
button { background: #ccc; transition: background 0.2s ease; } button:hover { background: #333; }
什么时候该用 animation
需要多步变化、精确时序、循环播放、或非状态驱动的视觉效果时，用 @keyframes 配合 animation 更合适。
- 可定义任意数量的关键帧（
0%、25%、50%…100%），控制每个阶段的样式 - 支持循环（
infinite）、方向（alternate）、填充模式（forwards）、暂停/运行等行为 - 适合加载动画、图标脉冲、页面入场动效、数据可视化过渡等复杂场景
- 例如：一个呼吸灯效果需要缩放+透明度交替变化，用 transition 很难自然表达，而 animation 可清晰描述全过程
能用 transition 就别硬套 animation
过渡更轻量、性能更好（尤其在 GPU 加速属性上），也更容易维护。如果只是「A 状态 → B 状态」且由用户交互直接触发，transition 是更自然的选择。
立即学习“前端免费学习笔记（深入）”；
- transition 在属性值可动画化且有明确起点终点时效率更高
- animation 虽灵活，但过度使用会增加 CSS 体积和重绘开销
- 两者不互斥：可以给同一个元素同时设置 transition 和 animation，只要作用属性不冲突
注意兼容性和可访问性
无论选哪个，都要考虑用户偏好。可通过 prefers-reduced-motion 减少或关闭动效。
- 在根元素或动画容器上加：
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } - 避免用动画干扰阅读节奏（比如文字闪烁、背景滚动），尤其是对注意力障碍或眩晕敏感的用户
