旧版安卓WebView动画卡顿主因是未触发GPU合成，须对单个元素动态加translate3d(0,0,0)并及时清理，禁用全局样式和非合成属性，用Layer Borders验证绿色图层。
top、left、box-shadow 或 background-color，整段动画就无声无息退回到 CPU 渲染，帧率直接掉到 15–20fps，手指一滑就“粘滞”。
为什么用 transform/opacity 还是卡
用了 transform 不等于进了 GPU 通道——旧版 WebView 要求你「明确告诉它该升层」，而且方式很具体：
-
translate3d(0, 0, 0)必须加在**单个动画元素上**，不能全局写.item { transform: translate3d(0,0,0); }，否则图层爆炸、内存飙升、滚动卡死 -
backface-visibility: hidden要写全前缀：-webkit-backface-visibility: hidden、backface-visibility: hidden，且只加在真正执行动画的元素上，不能加在父容器 - Android 4.4–5.1 中，
backface-visibility: hidden反而会抑制图层创建，此时得禁用它，改用 JS 动态注入transform: translate3d(0,0,0)并在animationend后立刻清除 - 静态写死
will-change: transform在 CSS 里 = 给每个元素预分配 GPU 内存，低端机极易 OOM
@keyframes 里哪些属性会悄悄拖垮动画
浏览器不会报错，但只要关键帧中出现以下任一属性，整段动画立即降级为 CPU 渲染：
-
top/left/margin/width/height：触发重排（reflow），主线程堵死 -
filter: blur()/drop-shadow()：每帧做高斯模糊，CPU 满载 -
box-shadow动画：阴影值变化反复销毁/重建合成层，滚动中容易变淡或消失 -
background-color/border-radius/color：哪怕只加一行，也中断 GPU 合成路径
安全组合只有：transform（含 translateX、scale、rotate）和 opacity。
如何验证动画真走 GPU 了
别猜，用 Chrome DevTools 连真机实测：
立即学习“前端免费学习笔记（深入）”；
- 打开
Rendering面板 → 勾选Layer Borders，绿色边框 = 独立合成层已就绪 - 勾选
Paint Flashing，动画过程中大面积黄色闪烁 = 仍在重绘（paint），说明有非合成属性混入 - 看
Performance面板的 FPS 曲线，持续低于 50fps 就要检查是否漏掉了translate3d(0,0,0)或写了不该写的属性
最容易被忽略的是：动画结束后没清掉 transform 或 will-change，残留样式会让后续滚动、交互持续占用 GPU 资源——这点在 Android 5–7 上尤其明显。
