安卓5–7动画异常的根本原因是旧版webview动画引擎缺失，需双写keyframes和animation、显式设置animation-fill-mode、避免display切换、强制重排、精简过渡属性、禁用重排属性、压缩关键帧、动态设置will-change、排查overflow影响及慎用backface-visibility。
为什么安卓5–7上动画根本不动或闪一下就消失
不是代码写错了，而是浏览器压根没启动动画引擎——旧版 WebView 对 @keyframes 和 animation 的解析极弱，连 -webkit- 前缀都不够用。实测 Android 6.0 的系统浏览器里，没加 -webkit-keyframes 就等于没写。
- 必须双写：既要有
@-webkit-keyframes slide，也要有@keyframes slide，不能只留一个 -
animation属性也得双写：-webkit-animation: slide 0.3s;+animation: slide 0.3s; - 别省略
animation-fill-mode：安卓低版本对默认值处理混乱，animation-fill-mode: forwards;得显式写死 - 避免用
animation-name: none切换动画——它在 Android 5.1 上常被忽略，改用 class 切换更稳
transition 在低端安卓上突然不触发怎么办
常见现象是点按钮后元素纹丝不动，控制台无报错，DevTools 里看到 transition 属性明明生效了——问题出在“触发条件”被浏览器悄悄忽略了。
- 确保目标元素有明确的初始
transform值：比如从transform: translateX(0);过渡到translateX(100px)，不能从空值开始 - 别用
display: none → block触发 transition：安卓 WebView 不认这个切换，改用visibility: hidden → visible+opacity或transform - JS 触发动画前，强制一次重排：
el.offsetHeight;（仅一次），让浏览器“意识到”样式要变了 - 过渡属性必须单写：错写成
transition: all 0.3s;会把非合成属性也拖进来，直接卡死；只写transition: transform 0.3s, opacity 0.3s;
动画一动就卡成 PPT，但代码看起来没问题
帧率掉到 20fps 以下，不是设备太差，而是你无意中混进了“重排杀手”。浏览器不报错，但整段动画已降级回 CPU 渲染。
- 删掉所有
top、left、width、height、margin、padding、box-shadow、filter（哪怕filter: blur(0px)也不行） - 位移统一用
transform: translate(30px, 20px)，别写translateX+translateY分开调用 -
@keyframes里只留两行：transform和opacity，其他全砍；关键帧压缩为0%→100%两级 - 禁用静态
will-change: transform：写在 CSS 里等于给每个元素提前建图层，安卓低端机内存扛不住；改用 JS 动态加：el.style.willChange = 'transform';，动画结束立刻设回'auto'
父容器一设 overflow: hidden，动画就卡住
这是最隐蔽的兼容性陷阱。你检查了所有子元素，发现 transform 没问题、transition 没问题，但 DevTools 的 Layer Borders 就是不显示绿框——问题在祖先节点。
- 逐级检查父级元素，只要任意一级写了
overflow: hidden或overflow: auto，就会抑制图层提升 - 临时删掉
overflow测试是否恢复；若必须裁剪，优先用clip-path: inset(0)（Android 6+ 支持），或套一层position: relative容器再设overflow - 慎用
backface-visibility: hidden：Android 4.4–5.1 反而会因此抑制图层创建，此时应禁用它，改用 JS 动态注入transform: translate3d(0, 0, 0) - 别在动画元素上同时用
transform和filter：低版本 WebView 无法合成，必走 CPU
console.log(el.offsetHeight) ——它可能正在后台默默拖垮整个动画流水线。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
