17370845950

优先用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; } }
• 避免用动画干扰阅读节奏（比如文字闪烁、背景滚动），尤其是对注意力障碍或眩晕敏感的用户