旧版Android动画卡顿是因使用top/left/filter等触发CPU渲染的属性，应改用transform/opacity并手动添加translate3d(0,0,0)提升图层，配合前缀和显式声明确保GPU合成生效。
为什么旧版Android动画一动就卡
不是代码写得不够“炫”，而是用了它根本扛不住的属性——top、left、filter、box-shadow，哪怕只混进一帧，整段动画就退化到 CPU 渲染，帧率掉到 15fps 以下。旧版 Android（5–7）WebView 对非合成属性极其敏感，不报错、不警告，只默默掉帧。
-
top/left/margin/width/height：改一次就触发重排（reflow），主线程瞬间堵死 -
filter: blur()和drop-shadow()：CPU 做高斯模糊，每帧重绘整块区域，blur(1px)就可能拖垮动画 -
box-shadow动画：阴影值变化会反复创建/销毁合成层，尤其滚动中容易变淡或消失 -
@keyframes里哪怕只加一行background-color或border-radius，整段动画就退回到 CPU 渲染
如何用 transform/opacity 安全触发 GPU 合成
旧版 Android（5–7）和 iOS Safari 对硬件加速支持不一致，不能靠浏览器自动识别，得手动“哄”它进 GPU 合成层。关键不是“开启硬件加速”，而是强制图层提升。
- 必须对**即将动画的单个元素**动态加
transform: translate3d(0, 0, 0)，而不是全局写.item { transform: translate3d(0, 0, 0); }——后者会让内存飙升、滚动直接卡死 -
translateZ(0)效果类似，但在部分 Android 5.1 WebView 中有兼容性波动，translate3d(0, 0, 0)更稳 - 加完必须清理：
animationend监听后执行el.style.transform = ''；安卓低版本可能丢事件，加setTimeout(() => el.style.transform = '', duration + 100)兜底 - 避免用
will-change: transform：IE11 完全无效，Android 4.4 可能引发闪烁，iOS 12–14 存在内存泄漏风险
前缀和声明怎么写才真正生效
Safari（尤其是 iOS 15 及更早）、旧版 Chrome、Android Browser 等 WebKit 内核浏览器，只认带前缀的规则，且顺序和完整性要求极高。
- 必须同时写两套：
@keyframes fadeIn和@-webkit-keyframes fadeIn，内容完全一致 - 动画属性成对出现：
animation: fadeIn 0.3s;+-webkit-animation: fadeIn 0.3s;，且-webkit-版本必须写在前面 -
transition同理：-webkit-transition: transform 0.3s ease, opacity 0.3s ease;+transition: transform 0.3s ease, opacity 0.3s ease; - 不要简写
transition: all，旧引擎解析容错率极低；每个要过渡的属性都得显式写出，包括缓动函数 - 避免在
@keyframes中使用var(--color)：Safari 旧版、Edge Legacy 完全不支持，也不报错，只是跳过整段
如何安全降级第三方动画库
别指望靠 UA 切整个库，而要按实际用到的 class 逐个筛查和替换。Animate.css 这类库很多效果表面是 transform，实则悄悄混入高危属性。
立即学习“前端免费学习笔记（深入）”；
- 高危类必须禁用：
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; }，而非动画化
真正难的不是加前缀或写 hack，而是把动画逻辑从“视觉表现”切换到“渲染通道控制”——你得清楚每一行 CSS 在目标浏览器里走的是哪条渲染路径。一旦混入 layout 或 paint 阶段的属性，GPU 合成就彻底失效，再怎么加 translate3d 也救不回来。
