移动端css动画卡顿主因是隐式重排触发Layout/Paint，应仅用transform/opacity/Filter并确保元素升为独立合成层。
为什么移动端 CSS 动画卡顿，根本不是“动画写得不够炫”
多数人第一反应是加 transform 和 will-change，但卡顿真正源头常是隐式重排触发：比如对 width、height、top、left、background-position 等属性做动画，浏览器必须反复计算布局（Layout）→ 绘制（Paint）→ 合成（Composite），而移动端 GPU 资源有限，Paint 阶段极易掉帧。
只保留「纯合成层动画」才能绕过 Layout 和 Paint，直通 Composite 阶段。关键就两条：只 animating transform / opacity / filter，且确保元素已提升为独立合成层。
如何确认某个动画是否真的走合成路径
chrome DevTools → Rendering 面板勾选 Paint flashing 和 Layer borders：
- 动画过程中出现大面积绿色闪烁 → 说明在 Paint，不达标
- 元素边缘有橙色边框 → 已提升为合成层；若无边框，即使写了
transform也可能被降级 - 动画时 Timeline 面板中只有
Composite Layers占比高，Layout和Paint几乎为 0 → 合格
注意：will-change: transform 不是银弹——它只是提示浏览器“准备提升”，但若元素本身受父容器约束（如 overflow: hidden）、或存在 3D 变换冲突，仍可能失效。
立即学习“前端免费学习笔记（深入）”；
必须规避的 5 类伪“合成”写法
.bad-1 { animation: slide-left 300ms; } @keyframes slide-left { from { left: 0; } /* 触发重排 */ to { left: 100px; } } .bad-2 { animation: scale-bg 200ms; } @keyframes scale-bg { from { background-size: 100% 100%; } / 触发 Paint / to { background-size: 200% 200%; } }
.bad-3 { animation: height-open 250ms; } @keyframes height-open { from { height: 0; } / 布局尺寸变化，强制重排 / to { height: 200px; } }
.bad-4 { transform: translateX(0); / 没有动画，但写了 transform → 提升了层，却没用上 / animation: fade-in 1s; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.bad-5 { will-change: transform; animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } / ❌ rotate 在部分安卓 WebView 中仍会触发 Paint（尤其带文字子节点时）/
移动端真正稳妥的合成动画写法
- 用
transform: translate3d(0, 0, 0) 或 transform: translateZ(0) 强制开启硬件加速（比 will-change 更可靠）
- 动画只作用于
transform（推荐 translate3d、scale3d、rotateZ）和 opacity；避免任何 rotateX/rotateY（易触发回退到 CPU 渲染）
- 给动画容器加
contain: layout paint style（现代安卓 Chrome / safari 支持），隔离其子树，防止父级重排波及
- 慎用
filter: blur() —— 它虽属合成属性，但在低端机上会显著增加 GPU 负担，建议用 backdrop-filter 替代（仅用于毛玻璃效果）
.bad-1 { animation: slide-left 300ms; } @keyframes slide-left { from { left: 0; } /* 触发重排 */ to { left: 100px; } } .bad-2 { animation: scale-bg 200ms; } @keyframes scale-bg { from { background-size: 100% 100%; } / 触发 Paint / to { background-size: 200% 200%; } }
.bad-3 { animation: height-open 250ms; } @keyframes height-open { from { height: 0; } / 布局尺寸变化，强制重排 / to { height: 200px; } }
.bad-4 { transform: translateX(0); / 没有动画，但写了 transform → 提升了层，却没用上 / animation: fade-in 1s; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.bad-5 { will-change: transform; animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } / ❌ rotate 在部分安卓 WebView 中仍会触发 Paint（尤其带文字子节点时）/
- 用
transform: translate3d(0, 0, 0)或transform: translateZ(0)强制开启硬件加速（比will-change更可靠） - 动画只作用于
transform（推荐translate3d、scale3d、rotateZ）和opacity；避免任何rotateX/rotateY（易触发回退到 CPU 渲染） - 给动画容器加
contain: layout paint style（现代安卓 Chrome / safari 支持），隔离其子树，防止父级重排波及 - 慎用
filter: blur()—— 它虽属合成属性，但在低端机上会显著增加 GPU 负担，建议用backdrop-filter替代（仅用于毛玻璃效果）
最易被忽略的一点：动画元素的父容器如果设置了 overflow: hidden，会截断子元素的合成层，导致 transform 动画降级。此时要么移除该限制，要么给子元素加 transform: translateZ(0) + position: relative 强制重建层。