必须只用transform和opacity触发硬件加速，禁用left/width等会触发重排的属性；手动添加translate3d(0,0,0)升图层，will-change需动态增删，避免父级overflow:hidden或filter截断合成层。
低端手机掉帧，根本不是“动画太复杂”，而是你正在用浏览器扛不住的方式触发动画——transition 一写错属性，整段就退回 CPU 渲染，60fps 直接崩到 15fps。必须只动 transform 和 opacity，其他全砍。
transition 只能写 transform 或 opacity
写 transition: left 0.3s 或 transition: width 0.2s，等于主动把每一帧都塞给 CPU 去重排（reflow）。安卓 5–7 WebView 里，一次重排就耗 3–8ms，16.67ms 的帧间隔根本不够用。
- ✅ 正确写法：
transition: transform 0.3s cubic-bezier(0.34, 1.61, 0.7, 1); - ✅ 位移用
transform: translateX(100px)，别碰left、margin-left - ✅ 缩放用
transform: scale(1.1)，别改width/height - ❌ 禁止混用：
transition: transform 0.3s, background-color 0.3s—— 只要带一个非合成属性，整条 transition 就降级
will-change 不是开关，是定时器
will-change: transform 不是加了就加速，而是告诉浏览器“马上要动”，让它提前准备图层。但加早了、加多了、不清理，反而让低端机 OOM 卡死。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 动画触发前一刻加：
el.style.willChange = 'transform'; - ✅ 动画结束立刻清：
el.addEventListener('transitionend', () => { el.style.willChange = 'auto'; }); - ⚠️ 安卓 WebView 可能丢
transitionend事件，必须兜底：setTimeout(() => el.style.willChange = 'auto', duration + 100); - ❌ 绝对不要写
* { will-change: transform; }或批量加在列表项上
Android 5–7 必须手动升图层
老版 Android WebView 不会自动为 transform 元素建独立合成层，得靠副作用强制触发。这不是玄学，是实测有效的兼容手段。
- ✅ JS 动态加：
el.style.transform = 'translate3d(0, 0, 0)';（比translateZ(0)更稳） - ✅ 加在即将动画的单个元素上，比如弹窗根节点、轮播容器，不是全局 class
- ✅ 动画开始前加，结束后立刻清：
el.style.transform = ''; - ⚠️ 清理不及时会导致滚动卡顿、内存飙升，尤其一屏 20+ 列表项时明显
- ❌ 避免父容器有
overflow: hidden或filter: blur()—— 这些会让子元素无法独立图层化
别信 duration 数值，先看渲染流水线
把 transition-duration 从 300ms 改成 100ms，卡顿不会消失。真正要盯的是浏览器每帧干了什么。
- ✅ 打开 Chrome DevTools → Rendering → 勾选 “FPS meter” 和 “Paint flashing”
- ✅ 动画区域应只闪绿色（paint），且 FPS 稳定在 55–60；若大片红/黄，说明重绘失控
- ✅ Performance 面板录制后看主线程火焰图，重点找 Layout 和 Paint 阶段是否频繁出现
- ⚠️ 如果动画中 JS 读取了
offsetTop或getBoundingClientRect()，会强制同步 layout，打断渲染流水线 - ❌ 不要依赖 UA 检测一刀切降级，而是按实际用到的 class 逐个筛查，比如
animate__hinge含filter: blur()，必须替换成animate__fadeIn并确认源码没混用非合成属性
最容易被忽略的点：动画元素的父容器样式。哪怕你只动 transform，只要父级有 overflow: hidden 或 filter，GPU 合成层就会被截断，整段动画悄悄退回到 CPU 渲染——浏览器不报错，也不警告，只默默掉帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
