CSS动画与transition怎么选？

CSS动画（animation）与过渡（transition）各有适用场景：transition轻量高效，适合处理按钮悬停、菜单展开等两态间的平滑切换，依赖类名或伪类触发，无需JavaScript即可实现优雅的状态变化；而animation则凭借@keyframes提供精细控制，适用于加载指示器、呼吸灯、页面入场等需多关键帧、循环播放或复杂时序的视觉效果。二者可协同使用，但应优先选用transition以保障性能与可维护性，同时务必兼顾兼容性与无障碍体验——例如通过prefers-reduced-motion响应用户动效偏好，避免干扰阅读或诱发不适。

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

今天关于《CSS动画与transition怎么选？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！