移动端CSS动画卡顿主因是重排重绘，transform和opacity仅触发GPU合成；应优先使用translate/opacity替代left/margin等布局属性，并合理启用will-change或translateZ(0)提升图层。
移动端 CSS 过渡卡顿，核心原因是浏览器在动画过程中频繁触发重排（reflow）和重绘（repaint），尤其是当动画属性涉及 width、height、top、left、margin、padding 等会改变布局的属性时。而 transform 和 opacity 是仅触发合成（compositing）的“高性价比”属性，能直接交由 GPU 加速，避开主线程瓶颈。
为什么 transform 和 opacity 更流畅
现代浏览器将页面分层渲染，当元素使用 transform: translateX() 或 opacity: 0.5 动画时，浏览器会自动将其提升为独立图层（layer），后续变化只更新该图层的纹理或透明度，不牵扯布局计算和整页重绘。而 left: 10px 或 margin-left: 10px 会强制浏览器反复计算文档流、触发 layout → paint → composite 流程，尤其在低端安卓机上极易掉帧。
如何正确启用硬件加速
- 用
transform: translateZ(0)或will-change: transform主动触发图层提升（注意：不要滥用will-change，仅对明确要动画的元素设置） - 避免在动画中同时修改非合成属性（比如一边
transform一边改background-color），否则可能引发图层合并与回退 - 确保动画元素有明确的
display: block或inline-block，避免因 display 切换导致图层失效 - 慎用
position: fixed在滚动区域中做动画——部分安卓 WebView 对 fixed 元素合成支持不稳定，可改用transform: translate()模拟定位
常见错误写法及替换方案
❌ 卡顿写法：
.box { left: 0; transition: left 0.3s ease; }<br>.box.active { left: 100px; }
立即学习“前端免费学习笔记（深入）”；
✅ 推荐写法：
.box { transform: translateX(0); transition: transform 0.3s ease; }<br>.box.active { transform: translateX(100px); }
同理，把 visibility: hidden + height: 0 的折叠动画，换成 opacity: 0 + transform: scaleY(0)，并配合 overflow: hidden 控制裁剪，既平滑又保持语义。
补充优化技巧
- 动画时长控制在 200–300ms，过长易感知延迟，过短则丢失动效反馈
- 优先用
cubic-bezier(.25,.46,.45,.94)（类似 iOS 弹性缓动），比ease更自然 - 对列表项逐个动画，用
animation-delay配合data-index控制 stagger 效果，避免同时触发动画造成瞬时压力 - 在真机调试时打开 Chrome DevTools → Rendering → “Paint flashing” 和 “Layer borders”，直观查看是否发生意外重绘或图层过多
