移动端CSS动画卡顿的核心是频繁重排重绘，应仅用transform和opacity配合will-change优化；避免left/top等属性，慎用filter和图层爆炸，JS动画须用requestAnimationFrame。
移动端 CSS 动画卡顿，核心问题常出在**频繁触发重排（reflow）和重绘（repaint）**，尤其是操作 left、top、width、height、opacity（未开启硬件加速时）等会牵动布局或全层绘制的属性。真正高效的做法是：**只动画 transform 和 opacity，并配合 will-change 提前告知浏览器“这个元素即将变化”，让其提前升格为独立图层并启用 GPU 加速。**
只用 transform 和 opacity 做动画
这两个属性属于“合成属性”（composited properties），浏览器可在不触发布局和重绘的前提下，仅通过图层合成（compositing）完成渲染，性能最高。
- ✅ 推荐写法：
transform: translateX(100px);、transform: scale(1.2);、opacity: 0.5; - ❌ 避免写法：
left: 100px;、margin-left: 100px;、width: 200px;、background-color: #ff0;（颜色变化需重绘） - 注意：单用
transform: translateZ(0)或translate3d(0,0,0)可强制创建新图层，但过度使用会增加内存开销和合成压力，不推荐盲目添加
合理使用 will-change 提升准备度
will-change 是提示浏览器“这个元素接下来很可能变化”，从而提前为其分配独立图层、优化纹理缓存。但它不是“性能开关”，滥用反而有害。
- ✅ 正确时机：在动画开始前 1～2 帧设置，动画结束后及时清除（例如用 JS 控制）
- ✅ 合理值：
will-change: transform;或will-change: opacity;（与实际动画属性严格一致） - ❌ 错误做法：全局加
will-change: transform;、长期保留在元素上、对静态元素提前声明 - 示例（JS 配合）：
element.style.willChange = 'transform';<br> setTimeout(() => {<br> element.style.transform = 'translateX(100px)';<br> // 动画结束回调中<br> element.style.willChange = 'auto';<br>}, 16);
避免隐式合成与图层爆炸
每个独立图层都会占用内存和 GPU 资源。移动端显存有限，图层过多会导致内存溢出、掉帧甚至崩溃。
立即学习“前端免费学习笔记（深入）”；
- 检查图层：Chrome DevTools → Rendering → ✅ “Layer borders” 查看哪些元素被提升；✅ “FPS meter” 观察帧率波动
- 合并动画元素：多个相邻小元素同时做 transform 动画？考虑用父容器统一 transform，减少图层数量
- 慎用
filter、backdrop-filter、mask：它们会强制创建新图层且性能开销大，移动端尽量避免或降级处理
补充：用 requestAnimationFrame 管控 JS 动画节奏
如果动画由 JS 控制（如滚动联动、手势拖拽），务必用 requestAnimationFrame 替代 setTimeout 或 setInterval，确保每帧只执行一次、与屏幕刷新率同步。
- ✅ 正确模式：
function animate() {<br> el.style.transform = `translateX(${x}px)`;<br> requestAnimationFrame(animate);<br>}<br>requestAnimationFrame(animate); - 搭配 passive event listener（如
{passive: true}）优化 touch/scroll 事件响应，防止阻塞主线程
