卡死根因是主线程反复重排重绘且gpu图层未及时回收，尤其android 4.4–6.0中will-change不释放、overflow:hidden抑制合成、transition:left强制cpu渲染；应改用transform、动态管控will-change、避免静态启用translate3d。
卡死不是因为动画没写对，而是浏览器在主线程里反复重排、重绘，同时又没及时回收 GPU 图层，几秒内内存就爆了——尤其 Android 4.4–6.0 的 WebView，will-change: transform 一设上就不释放，overflow: hidden 父容器再一压，合成层根本升不起来。
为什么 transition: left 在安卓 4.4–5.1 里直接卡死
改 left 会强制触发重排（reflow），浏览器得在主线程里重新算位置、尺寸、换行、文本流……一次重排耗时 3–8ms，而 60fps 帧间隔才 16.67ms。低端 WebView 调度能力弱，一帧内多次重排，主线程瞬间堵死，手指滑动都“粘住”。transform: translateX(100px) 只挪图层，GPU 合成线程处理，不碰布局也不重绘。
- 错误写法：
transition: left 0.3s ease→ 整条过渡退回 CPU 渲染 - 正确写法：
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 别混用：
transition: left, transform 0.3s→ 只要含一个非合成属性，整段降级
为什么加了 translate3d(0, 0, 0) 还是卡，甚至更卡
translate3d(0, 0, 0) 是旧版 WebView 的兜底触发器，但它不是保险丝——加错位置、加错时机、不清理，反而加速卡死。
- 静态写死在 CSS 里（如
.item { transform: translate3d(0, 0, 0); }）→ 一屏 20 个元素，每个都占 GPU 内存，Android 5–7 很快 OOM 黑屏 - 父容器设了
overflow: hidden→ 合成层被抑制，DevTools 里看不到绿色图层边框 - JS 动态加完不清理 →
animationend未触发或延迟，残留样式持续占位 - 只在 UA 匹配时启用：
navigator.userAgent.includes('Android 5') || navigator.userAgent.includes('Android 6') || navigator.userAgent.includes('Android 7')
为什么 will-change: transform 在安卓旧 WebView 中等于定时炸弹
Android 4.4–6.0 的合成器不会自动回收图层。will-change 一旦设上，GPU 内存就一直挂着，几轮动画下来直接 OOM，表现就是黑屏、白屏、返回键失灵。
- 绝对不要写进 CSS 文件：
.slide { will-change: transform; }是高危操作 - 动态添加必须配对清除：
el.style.willChange = 'transform'→animationend中执行el.style.removeProperty('will-change') - 兜底必须加：
setTimeout(() => el.style.removeProperty('will-change'), duration + 100)，iOS Safari 和低版本安卓常丢事件 - 禁用嵌套：
parent { transform: translateZ(0); } .child { transform: scale(0.9); }→ 每层单独建图层，3 层就可能吃掉 40MB+
为什么写了前缀、用了 transform，动画还是闪或跳
很多“闪”不是性能问题，是逻辑跳变：关键帧起止状态不一致、animation-fill-mode 没对齐、或者多值 transform 被旧引擎解析失败。
-
@-webkit-keyframes必须和@keyframes名称完全一致（大小写敏感），且内容一字不差 -
animation-fill-mode: forwards必须显式声明，否则动画结束瞬间回退到初始状态 - Safari 6.1–9.3 不支持
transform: translateX(0) rotate(0)这种多值写法 → 拆成两个独立 keyframe，每帧只设一个变换 - 避免在动画中调
getBoundingClientRect()或offsetHeight→ 强制同步 layout，首帧直接破防
真正卡死的根因，往往不在动画本身，而在图层生命周期管理——旧 WebView 不会自动收，你得亲手清；它也不认你写的“优化”，只看你有没有踩中它的兼容雷区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
