移动端CSS动画卡顿主因是频繁重排重绘或未走GPU合成路径；应仅用transform、opacity、简单filter触发合成，避免top/left等属性，动态设置will-change并及时清除，用DevTools验证绿色图层边框。
移动端 CSS 动画卡顿，绝大多数情况不是动画写得不够好，而是浏览器被迫频繁重排、重绘，或者根本没走 GPU 合成路径。直接加 will-change: transform 或硬塞 transform: translateZ(0) 往往治标不治本，甚至让低端安卓机更卡。
为什么 transform 不等于自动流畅
很多人以为只要用了 transform 就进了 GPU 加速通道，其实不然。浏览器只对「已提升为独立合成层」的元素启用硬件加速，而是否升层，取决于父容器样式（比如 overflow: hidden）、兄弟元素状态、图层数量限制，甚至 JS 是否在 rAF 里读取了 offsetTop 或 getBoundingClientRect() —— 这些操作会强制同步重排，直接打断渲染流水线。
- ✅ 正确做法：动画前一次性缓存所有需要的尺寸，rAF 中只写
el.style.transform - ❌ 错误写法：在
requestAnimationFrame回调里先算el.getBoundingClientRect().left，再设transform - ⚠️ 注意：iOS Safari 对
filter: blur()合成支持弱，backdrop-filter在部分安卓 WebView 中直接降级为软件绘制
哪些 CSS 属性真正安全且高效
能稳定触发合成、不触发 layout/paint 的属性极少，只有三个核心成员被主流浏览器一致支持：
-
transform（含translateX、scale、rotate；避免用translate3d(0,0,0)无脑升层） -
opacity（注意：不能和visibility混用，后者会移出渲染树） -
filter（仅限简单值如blur(2px)、grayscale(0.5)；复杂链式滤镜慎用）
以下属性一律回避：top、left、width、height、margin、background-color、box-shadow（尤其在长列表中）。
立即学习“前端免费学习笔记（深入）”；
will-change 不是开关，是内存预告
will-change 的作用是提示浏览器“这个元素接下来要变”，让它提前准备合成层。但它不是性能补丁，滥用会导致显存暴涨、页面白屏甚至耗电激增。
- ✅ 合理用法：在
touchstart或mouseenter时动态设置el.style.willChange = 'transform'，动画结束后立即设为'auto' - ❌ 错误用法：全局写死在 CSS 里，比如
.item { will-change: transform; }，尤其在列表项上批量使用 - ? 替代方案：对简单交互动画，
transform: translateZ(0)已足够；will-change更适合多阶段、长周期动画（如模态框入场+缩放+遮罩渐显）
如何验证是否真走 GPU 加速
别猜，用 Chrome DevTools 实测。打开 Rendering 面板，勾选：
-
Layer Borders：看动画元素是否被绿色边框包裹（有边框 = 独立合成层） -
Paint Flashing：拖动或触发动画，观察是否大面积红色闪烁（有闪烁 = 触发重绘） -
FPS Meter：实时看帧率，低于 45fps 就值得警惕，持续低于 30fps 必须干预
特别注意：某些安卓 WebView（如旧版 UC、QQ 浏览器内核）不支持 Layer Borders 可视化，此时应优先降级策略——比如检测 prefers-reduced-motion 后直接关闭动画，或用 transition + class 切换替代 @keyframes。
真正决定丝滑与否的，从来不是“有没有开 GPU”，而是“有没有让浏览器少干活”。聚焦 transform/opacity、按需升层、控制图层规模、避开同步布局读取——这些点漏掉任意一个，都可能让 60fps 变成幻觉。
