translate3d(0,0,0)在安卓5–7中有效，因其强制元素升至gpu合成层，避开layout/paint；需js动态添加并及时清理，且须规避overflow:hidden父容器干扰。
安卓 5–7 的 WebView 对 CSS 动画支持弱，left/top 类属性动画基本不可用；直接上 translate3d() 是最稳妥的兜底方案，但必须配对清理、避开父级干扰，否则卡得更厉害。
为什么 translate3d(0, 0, 0) 在安卓低版本里还管用
Android 5–7 的 WebView 渲染引擎（基于旧版 Blink）对 will-change 支持极差，甚至完全忽略；而 translate3d(0, 0, 0) 是个“副作用触发器”——它不改变视觉，但强制浏览器把元素升到独立 GPU 合成层。后续只要动画只改 transform 或 opacity，就跳过 layout 和 paint 阶段。
注意：translateZ(0) 效果等价，但在部分 Android 5.1 WebView 中有兼容性波动，translate3d(0, 0, 0) 更稳。
- 仅对
@keyframes中使用translate3d()的帧有效，混用left会整段退化 - 不是所有安卓设备都响应，需 UA 检测：只在
navigator.userAgent.includes('Android 5') || navigator.userAgent.includes('Android 6') || navigator.userAgent.includes('Android 7')时注入 - 别指望它修复
filter: blur()或动态box-shadow，这些在低版本 WebView 里仍走 CPU
加在哪？什么时候加？加完怎么收
错误做法是全局写 .item { transform: translate3d(0, 0, 0); }——每个列表项都建合成层，内存飙升，滚动直接卡死。
- 只加在**即将播放动画的单个元素**上，比如轮播容器、弹窗根节点、按钮图标
- 用 JS 在交互触发瞬间加：
el.style.transform = 'translate3d(0, 0, 0)';（不要靠 class，避免样式优先级干扰） - 动画结束后必须清理：监听
animationend，执行el.style.transform = ''; - iOS Safari 可能丢失
animationend，安卓低版本同样存在，加setTimeout(() => el.style.transform = '', duration + 100)兜底
父容器 overflow: hidden 是隐形杀手
即使你给子元素写了 translate3d()，只要它的任意一级父容器设了 overflow: hidden，图层提升就会被抑制——Chrome DevTools 的 Layer Borders 不出绿框，动画就还在主线程跑。
- 检查路径上所有祖先元素，特别是轮播外层、模态框 wrapper、tab 内容区
- 临时去掉
overflow: hidden测试是否恢复绿框；若必须裁剪，改用clip-path: inset(0)（Android 6+ 支持）或包裹一层position: relative容器再设 overflow - 避免在动画元素上同时用
filter和transform，低版本 WebView 会拒绝升层
验证是否真加速：别信代码，看绿框
写了 translate3d() 不等于生效。打开 Chrome for Android（或桌面 Chrome 模拟），进 DevTools → Rendering → 勾选 Layer borders：
- 有绿色边框 = 独立合成层已建，GPU 加速中
- 没绿框 = 被父级抑制、或 UA 不识别、或动画属性混用了非合成值（如
background-color） - 大面积绿框（尤其列表项全绿）= 图层爆炸，立刻删掉批量声明
真正卡顿常发生在动画启动后又同步读取 offsetHeight 或修改 margin —— 这些操作会强制回流，GPU 层也救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
