transform 和 opacity 能避免卡顿，因其触发合成层，不触发布局与绘制；left/top/width/height 等则频繁触发 layout→paint→composite，加重 CPU 负担。
为什么 transform 和 opacity 能避免卡顿
浏览器对 transform 和 opacity 的动画做了硬件加速优化：它们触发的是「合成层（compositing layer）」，只重绘图层内容，不触发布局（layout）和绘制（paint）。而 left、top、width、height、background-color 等属性动画会频繁触发 layout → paint → composite 流程，CPU 压力大，尤其在中低端设备上明显掉帧。
哪些 CSS 属性动画必须替换成 transform
常见需替换的写法：
-
left: 100px→ 改用transform: translateX(100px) -
top: 50px→ 改用transform: translateY(50px) -
width: 200px→ 若必须缩放，优先用transform: scaleX(2)（注意：scale 会影响子元素，需配合transform-origin控制基准点） - 旋转/倾斜等同理：
rotate(45deg)、skewX(10deg)都比改transform以外的属性更高效
opacity 动画要注意的兼容性细节
opacity 本身是可硬件加速的，但容易被意外“降级”：
- 父容器设置了
overflow: hidden且子元素有transform，可能阻断合成层提升 —— 可加will-change: opacity强制提示浏览器 - IE10+ 和所有现代浏览器都支持
opacity动画，但旧版 Android WebView（≤4.3）对opacity+transform组合偶有闪烁，此时可加transform: translateZ(0)或backface-visibility: hidden辅助触发 GPU 层 - 不要对
display: none元素做opacity动画 —— 它已脱离渲染树，动画无效；应先设opacity: 0; visibility: visible;，再过渡
检查是否真正在用 GPU 加速的简单方法
在 Chrome DevTools 中打开 Rendering 面板（Cmd+Shift+P → 输入 “Rendering”），勾选 Paint flashing 和 Layer borders：
立即学习“前端免费学习笔记（深入）”；
- 动画期间只有绿色闪动（paint）→ 说明仍在 CPU 渲染，没走合成
- 能看到橙色边框包裹元素 → 表示该元素已提升为独立合成层，
transform/opacity正常生效 - 若某元素本该加速却没出现橙色边框，检查它是否被父级的
transform: none或will-change: auto抑制了层提升
.animated-box {
/* ✅ 正确：触发合成层 */
transform: translateX(0);
opacity: 1;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.animated-box:hover {
transform: translateX(100px);
opacity: 0.8;
}
真正卡顿的根源往往不是“用了什么动画”，而是“动画是否被浏览器识别为可合成”。把 transform 和 opacity 当成默认选项，其他属性动画要先问一句：能不能绕开？
