CSS动画与过渡效果怎么选？

CSS动画与Transition并非简单替代关系，而是各司其职的协作搭档：Transition以轻量、语义化的方式优雅处理状态切换（如悬停变色、点击缩放），强调“属性变化时如何过渡”，但不擅长多阶段或循环控制；Animation则依托@keyframes提供精确的时间轴调度能力，支持循环、暂停、倒播及复杂关键帧序列，适合loading动效、交互动画等节奏敏感场景。二者混用是真实项目的常态——用Transition驱动用户交互反馈，用Animation承载装饰性循环动效，同时必须规避常见陷阱：避免transition: all滥用导致队列混乱，慎用display/height等不可过渡属性，优先采用transform和opacity保障性能，并通过class切换而非内联style操作触发过渡，必要时借助Web Animations API实现精细控制；最终成败取决于对图层合成、重排重绘及主线程帧率的持续监控——毕竟再炫酷的动画，卡顿一帧，体验就全盘崩塌。

transition 适合状态切换，不是动画控制台

如果你要实现“鼠标悬停变色”“按钮点击缩放”这类有明确起点和终点的状态变化，transition 是更轻、更语义化的选择。它不描述过程，只声明“当某个属性变了，用什么方式过渡过去”。

常见错误是拿 transition 去做多阶动画（比如先平移再旋转再透明），结果发现加了 transition: all 0.3s 后所有属性一锅炖，鼠标快速进出时动画队列卡住、跳帧，甚至触发多次重排。

• 只对可计算的 CSS 属性生效（transform、opacity、color 等），display、height（从 0 到 auto）这类不支持过渡
• 必须依赖属性值的显式变更：靠 JS 改 className 或直接设 style.opacity 才能触发，单纯 class 存在但没变化不会动
• 性能敏感场景优先用 transform 和 opacity，避免触发布局（width、left）导致重排

@keyframes 动画适合节奏可控、多阶段或循环行为

需要循环播放、暂停/逆播、精确控制中间关键帧（比如 loading 图标转三圈后抖一下），就得上 @keyframes + animation。它本质是时间轴驱动，和元素当前状态解耦。

典型翻车现场：用 animation 实现一个“hover 弹出菜单”，结果鼠标一进一出就反复触发，动画重头开始，体验像抽搐；或者忘了加 animation-fill-mode: forwards，动画一结束立刻回退到初始态，UI 断层。

• animation-play-state 可以暂停，animation-direction: reverse 能倒放，animation-iteration-count: infinite 支持循环——transition 完全没有这些能力
• 动画中修改 transform 不会打断当前动画，但改 transition 相关属性（如 transition-duration）会重置整个过渡流程
• 注意兼容性：@keyframes 在 IE10+ 支持，但部分老 Android WebView 对 animation-timing-function 的贝塞尔曲线解析不准

JS 控制动画时，别直接操作 style 写 transition

想用 JS 触发动画？别在代码里反复写 el.style.transition = 'opacity 0.2s' 再改 el.style.opacity。这样极易引发样式冲突、过渡被覆盖、或因浏览器渲染时机问题导致动画不触发。

真实项目里最稳的方式是：用 class 切换驱动 transition，或用 element.animate()（Web Animations API）接管关键帧逻辑。

• 推荐模式：el.classList.add('is-open')，CSS 里写 .is-open { opacity: 1; transform: translateY(0); } + 对应 transition
• 需要 JS 动态控制进度（比如拖拽中实时更新动画位置），用 el.animate(keyframes, options)，它返回 Animation 实例，可调 pause()、currentTime 等
• 慎用 getComputedStyle(el).opacity 做过渡判断——它返回字符串（如 "1"），且强制同步布局，高频读取会卡顿

性能分水岭：硬件加速不是万能开关

很多人以为加个 transform: translateZ(0) 或 will-change: transform 就能“开启 GPU 加速”，实际效果常不如预期，甚至引发更多内存占用和闪烁。

真正起效的前提是：该元素确实被提升为独立图层，且变化属性不触发重排重绘。否则只是白费力气，还可能让低端设备更卡。

• transform 和 opacity 天然触发合成层，但频繁创建新图层（比如给几十个列表项都加 will-change）会导致内存暴涨
• will-change 应该在动画开始前 1–2 帧提前设置，动画结束后及时清除，而不是长期挂载在 class 上
• 用 Chrome DevTools 的 Layers 面板确认是否真生成了独立图层，别只看“GPU Accelerated”字样

复杂交互动画里，transition 和 animation 往往得混用：用 transition 做主交互反馈，用 animation 处理装饰性循环动效，并始终盯着主线程帧率和图层数量——这点容易被忽略，但决定了用户滑动页面时是跟手还是发飘。

好了，本文到此结束，带大家了解了《CSS动画与过渡效果怎么选？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！