HTML5动画在微信X5内核中失效主因是强制降级、CSS触发异常或requestAnimationFrame被节流；需用translate3d开启硬件加速、避免calc()、缓存canvas上下文、绕过微信验证真因。
HTML5 动画在微信内置浏览器（X5 内核）上跑不起来，大概率不是写法错了，而是被强制降级、CSS 触发时机异常、或 requestAnimationFrame 被节流导致卡顿/白屏。
为什么 CSS 动画在微信里突然不执行了
微信 Android 端长期使用腾讯 X5 内核（非标准 WebKit/Blink），对 will-change、transform: translateZ(0)、@keyframes 中的 calc() 或变量引用支持不稳定；iOS 微信虽用 WKWebView，但会拦截部分 animation-fill-mode 行为，尤其在页面 visibility 变化后动画不恢复。
- 常见现象：
animation-play-state: running无效、首帧空白、循环动画中途卡死 - 必须加
transform: translateZ(0)或transform: translate3d(0,0,0)强制开启硬件加速（X5 对纯left/top动画几乎不加速） - 避免在
@keyframes里写calc(100% - 20px)，X5 不解析；改用预计算值或 JS 控制 - 动画元素需有明确的
display: block或visibility: visible初始态，X5 对display: none后 show 的元素常丢 animation
requestAnimationFrame 在微信里掉帧严重怎么办
微信 Android 的 X5 内核对 requestAnimationFrame 做了重度节流（尤其后台切回前台时），JS 动画容易卡在 10–15fps，且首次调用延迟高。
- 不要依赖单次
requestAnimationFrame做关键帧逻辑；改用setTimeout(..., 16)+ 时间戳差值控制帧节奏（兼容性更稳） - 务必在
raf回调开头加if (document.hidden) return，防止切页后继续消耗 CPU - 复杂动画建议拆成多个独立
raf链，避免单次回调内 DOM 操作过多（X5 对批量重排重绘容忍度极低） - iOS 微信中若发现
raf突然停止，检查是否触发了scroll或touchmove的 passive 默认行为，导致事件监听器阻塞主线程
Canvas 动画在微信里黑屏或闪烁的修复方式
X5 对 canvas.getContext('2d') 的渲染管线优化较弱，且存在 canvas 尺寸变更后未清空缓冲区、或 toDataURL() 返回空字符串的问题。
