旧版 Android（5–7）浏览器掉帧主因是混用非合成属性，应仅用 transform/opacity 动画，并通过 translate3d(0,0,0) 提升图层、动态添加清理、规避 overflow:hidden 断层及高危 CSS 属性。
旧版 Android（5–7）浏览器掉帧，不是动画写得不够“炫”，而是用了它根本扛不住的属性——top、left、filter、box-shadow，哪怕只混进一帧，整段动画就退化到 CPU 渲染，帧率掉到 15fps 以下。
为什么 translate3d(0, 0, 0) 在 Android 5–7 还管用
它不是“开启硬件加速”的开关，而是一个强制图层提升的副作用触发器：不改变视觉，但让浏览器把元素升到独立 GPU 合成层。后续只要动画只改 transform 或 opacity，就跳过 layout 和 paint 阶段。
-
translateZ(0)效果类似，但在部分 Android 5.1 WebView 中有兼容性波动，translate3d(0, 0, 0)更稳 - 必须 JS 动态加在**即将动画的单个元素**上，比如弹窗根节点、轮播容器，而不是全局写
.item { transform: translate3d(0, 0, 0); }——后者会让内存飙升、滚动直接卡死 - 加完必须清理：
animationend监听后执行el.style.transform = ''；安卓低版本可能丢事件，加setTimeout(() => el.style.transform = '', duration + 100)兜底
哪些 CSS 属性一用就卡，必须砍掉
Android 5–7 WebView 对非合成属性极其敏感，混用即降级，且不报错、不警告，只默默掉帧。
-
top/left/margin/width/height：改一次就触发重排（reflow），主线程瞬间堵死 -
filter: blur()和drop-shadow()：CPU 做高斯模糊，每帧重绘整块区域，blur(1px)就可能拖垮动画 -
box-shadow动画：阴影值变化会反复创建/销毁合成层，尤其滚动中容易变淡或消失 -
@keyframes里哪怕只加一行background-color: #fff或border-radius: 4px，整段动画就退回到 CPU 渲染
如何安全替换 Animate.css 等第三方库效果
别指望靠 UA 切整个库，而要按实际用到的 class 逐个筛查和降级。
立即学习“前端免费学习笔记（深入）”；
- 高危类必须禁用：
animate__hinge（含filter: blur()）、animate__swing（rotate+skew混合）、animate__jello（三重transform叠加）、animate__lightSpeedInRight（含box-shadow动画） - 可保留的安全类仅限纯
transform+opacity实现的，如animate__fadeIn、animate__slideInDown，但需翻源码确认没悄悄加filter - JS 动态降级示例：
el.classList.replace('animate__hinge', 'animate__fadeIn')，触发前检测navigator.userAgent.includes('Android 6') - 若必须保留阴影/模糊效果，改用静态伪元素模拟：
.card::after { box-shadow: 0 2px 6px rgba(0,0,0,0.08); z-index: -1; }，再只对opacity做过渡
父容器 overflow: hidden 是隐形断层点
即使你给子元素加了 translate3d(0, 0, 0)，只要它的任意一级祖先设了 overflow: hidden，图层提升就会被抑制——DevTools 的 Layer Borders 不出绿框，动画就在主线程跑。
- 检查路径上所有祖先元素，特别是轮播外层、模态框 wrapper、tab 内容区
- 临时去掉
overflow: hidden测试是否恢复绿框；若必须裁剪，改用clip-path: inset(0)（Android 6+ 支持）或包裹一层position: relative容器再设overflow - 避免在动画元素上同时用
filter和transform，低版本 WebView 会破坏图层合并
真正卡顿的根源，往往不是“没加 transform”，而是加了之后又偷偷读了 getBoundingClientRect()、写了 style.width，或者忘了清掉 will-change —— 这些操作会在动画过程中强制同步 layout，GPU 加速瞬间失效。
