Animate.css在Android 5–7卡顿主因是filter和box-shadow强制CPU渲染，导致帧率低于15fps；需禁用animate__hinge等高危类，改用纯transform+opacity动画，并避免祖先元素设置overflow:hidden。
为什么Animate.css在Android 5–7上一动就卡
不是Animate.css写得差，而是它默认大量使用filter和box-shadow动画——这两类属性在旧版安卓 WebView（基于 Blink 49–51）里几乎全走 CPU 渲染。哪怕只是blur(1px)或drop-shadow(0 2px 4px rgba(0,0,0,0.1))，也会触发重绘+合成层反复创建，帧率直接掉到 15fps 以下。
更麻烦的是，Animate.css 的部分效果（如 animate__fadeInUpBig）内部混用了 transform 和 opacity，但只要某帧带 filter，整段动画就退化回 CPU 路径，GPU 加速完全失效。
哪些Animate.css类必须禁用或替换
直接检查你实际用到的 class，别靠文档猜。以下类在 Android 5–7 上高概率卡顿，建议移除或手动重写：
-
animate__hinge：含filter: blur()+ 多重transform，退化严重 -
animate__swing：依赖transform: rotate()+transform: skew()混合，旧 WebView 对 skew 合成支持差 -
animate__jello：用transform: scale()+transform: skewX()+transform: skewY()，三重变换叠加触发 layout 回退 -
animate__lightSpeedInRight：含box-shadow动画，滚动中阴影会突然变淡甚至消失
安全替代方案：只保留纯 transform + opacity 类，例如：animate__fadeIn、animate__slideInDown、animate__zoomIn（注意：确认其源码未悄悄加 filter）。
如何用JS动态降级动画效果
不能靠 UA 硬切整个库（影响 iOS），而要在触发动画前实时判断并替换行为：
- 检测是否为低版本安卓：
navigator.userAgent.includes('Android 5') || navigator.userAgent.includes('Android 6') || navigator.userAgent.includes('Android 7') - 对目标元素，用 JS 移除原 Animate.css class，改用轻量 class：
el.classList.replace('animate__hinge', 'animate__fadeIn') - 若必须保留模糊/阴影效果，改用静态伪元素模拟：
.card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 2px 6px rgba(0,0,0,0.08); z-index: -1; }，再只对opacity做过渡 - 避免在
animationend里清理 class 后立刻复用——旧 WebView 可能丢事件，加setTimeout(() => { /* 清理或复位 */ }, duration + 100)兜底
父容器 overflow: hidden 是隐形断层点
即使你把 transform: translate3d(0, 0, 0) 加在动画元素上，只要它的任意一级祖先（比如轮播外层、模态框 wrapper、tab 内容区）设了 overflow: hidden，图层提升就会被抑制——DevTools 的 Layer Borders 不出绿框，动画仍在主线程跑。
验证方法：临时删掉所有祖先的 overflow: hidden，看动画是否恢复流畅；若必须裁剪，优先用 clip-path: inset(0)（Android 6+ 支持），或套一层 position: relative 容器再设 overflow。
最常踩的坑是：以为“只改动画元素就行”，结果父容器一个 overflow: hidden 就让所有硬件加速失效。这点在 Animate.css 的 modal 或 toast 组件里特别容易漏查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
