CSS动画高CPU/耗电主因是触发重排或强制同步布局，而transform+opacity可交由合成器线程独立处理，避免主线程阻塞、提升GPU复用率、降低移动端功耗。
CSS 动画本身不必然导致高 CPU 或耗电，问题出在动画触发了频繁重排（reflow）或强制同步布局（forced synchronous layout），尤其是用 top/left/width/height 等会触发布局的属性做动画时。
为什么 transform + opacity 能显著降低 CPU 占用？
浏览器对 transform 和 opacity 的动画可以交由合成器线程（compositor thread）独立处理，不经过主线程的样式计算 → 布局 → 绘制流水线。这意味着：
- 主线程仍可响应点击、滚动等交互，不会卡顿
- GPU 可直接复用图层，避免每帧重绘整个元素区域
- 移动端设备省电效果明显（尤其 OLED 屏幕上
opacity: 0实际可能关闭子像素渲染）
反例：animation: slide-left 1s; @keyframes slide-left { to { left: 100px; } } 会强制每帧触发 layout，Chrome DevTools 的「Rendering」面板中勾选 “Layout Shift Regions” 就能看到红色闪烁区域。
如何快速检测和定位耗电/高 CPU 的 CSS 动画？
不用猜，用浏览器原生工具直击问题：
立即学习“前端免费学习笔记（深入）”；
- Chrome：打开
chrome://tracing→ 录制 5 秒含动画的操作 → 查看Layout和Recalculate Style是否密集出现（尤其在动画帧之间） - Safari：开发菜单启用「Timelines」→ 检查「Rendering Frames」中是否持续 > 60fps 且有大量「Layout」或「Paint」条
- Firefox：
about:performance页面查看各标签页的 CPU / Energy Impact，动画运行时观察数值跳变 - 命令行辅助：macOS 上运行
powermetrics --samplers smc,cpu,thermal,gpu --show-process-energy | grep -i "your-browser"，确认 GPU 利用率是否异常飙升
哪些看似安全的写法其实暗藏陷阱？
以下写法在视觉上没问题，但实际破坏了硬件加速条件：
-
will-change: transform;写在动画开始前 1 帧才加 —— 太晚，浏览器来不及提升图层；应提前加在初始状态（或至少在 hover 前一帧用 JS 预设） -
transform: translateX(0) scale(1);中混入rotateZ(0deg)但父容器有overflow: hidden—— 可能导致子元素被裁剪时强制回退到软件渲染 - 用
@keyframes动画filter: blur(2px)—— 每帧需重新高斯模糊，GPU 不加速，CPU 持续满载；改用backdrop-filter（仅支持 backdrop 场景）或预渲染模糊图 - 在
position: fixed元素上动画top+transform混用 —— 浏览器可能放弃合成优化，因 fixed 元素坐标系特殊
一个最小验证示例：
.bad { animation: move 2s infinite; }
@keyframes move { to { top: 100px; transform: rotate(10deg); } }
<p>.good { animation: move2 2s infinite; }
@keyframes move2 { to { transform: translateY(100px) rotate(10deg); } }前者在 Chrome 125+ 中仍会触发 layout，后者全程走合成器。
真正关键的不是“有没有用 transform”，而是“有没有让浏览器确信这个元素可以被稳定地升层并独立合成”。任何打断图层连续性（如 opacity 变化时父容器发生 overflow 变化）、或引入 layout 依赖（比如用 calc(100vh - 20px) 当动画值）的行为，都会让优化瞬间失效。
