旧版 Android（5–7）中 transform 失效是因未触发 GPU 合成层，须同时写带前缀的 -webkit-transform 和标准 transform，并用 translate3d(0, 0, 0) 强制升层，且动画后需清理样式。
旧版 Android（5–7）浏览器里 transform 失效，不是写法错，而是没触发 GPU 合成层——必须手动加 translate3d(0, 0, 0) 并配对前缀，否则整段动画静止或布局错乱。
为什么只写 transform: translateX(10px) 在 Android 5–7 会失效
这些版本的 WebView（尤其系统浏览器和微信内置浏览器）不认纯标准 transform 声明。它需要显式、带前缀、且能触发图层提升的写法才能进入 GPU 渲染通道。
- 只写
transform: translateX(10px)→ Safari/iOS 可能动，Android 5–7 直接忽略，无报错、无 fallback - 只写
-webkit-transform: translateX(10px)→ 现代 Chrome/Edge 忽略，动画在新环境也挂掉 - 必须同时写两行：
-webkit-transform在前，transform在后，且值完全一致 - 更关键的是：光有 transform 不够，得让它“升层”，否则仍走 CPU 渲染，动画卡顿或不动
必须加 translate3d(0, 0, 0) 的真实作用
它不是“开启硬件加速”的开关，而是强制浏览器为该元素创建独立 GPU 合成层的副作用触发器——不改变视觉，但让后续 transform 和 opacity 变化跳过 layout/paint 阶段。
- 用
translateZ(0)在部分 Android 5.1 WebView 中有兼容性波动，translate3d(0, 0, 0)更稳 - 必须加在**即将动画的单个元素**上，比如弹窗容器、轮播项，不能全局写
.item { transform: translate3d(0, 0, 0); }—— 否则内存暴涨、滚动直接卡死 - 动画结束必须清理：
animationend后设el.style.transform = ''；安卓低版本可能丢事件，加setTimeout(() => el.style.transform = '', duration + 100)兜底
前缀与声明顺序不严格就等于没写
WebKit 内核浏览器（Android Browser、旧版 Chrome、iOS Safari）只认 -webkit-transform，而 Firefox/Edge 只认标准 transform。两者缺一不可，且顺序不能反。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序：
-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); - 错误顺序：
transform: ...; -webkit-transform: ...;→ WebKit 浏览器直接忽略标准版，又没看到前缀版，结果为空 - 所有属性名、单位、小数位必须完全一致，比如
-webkit-transform: scale(1.2);和transform: scale(1.2);，不能一个写scale(1.20)一个写scale(1.2) -
-ms-transform对 IE10+ 有效，但对 Android WebView 无效，可不加；-o-transform已淘汰，不用管
哪些操作会让 transform 表面生效实则退化
即使加了前缀和 translate3d，只要混入一个非合成属性，整条动画就回退到 CPU 渲染，帧率暴跌，且毫无提示。
-
transition: all 0.3s是隐形炸弹——某次改了margin或background-color就悄悄卡住 -
top/left/width/height：改一次就重排，主线程堵死 -
filter: blur()、box-shadow动画：CPU 做高斯模糊，低端机一帧超 10ms - 父容器含
overflow: hidden+border-radius但没加rotate(0deg)或translateZ(0)→ 裁剪失效，子元素“穿出”边界，看起来像 transform 没生效
真正难的不是加几行 CSS，而是意识到：旧版 Android 不是“支持不全”，而是渲染路径完全不同。你写的每一条规则，都得明确告诉它“请升层、请走 GPU、请别碰 layout”。漏掉任意一环，它就默默退回 CPU，连 warning 都不给你。
