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() 返回空字符串的问题。
立即学习“前端免费学习笔记（深入）”；
- 每次
canvas.width/height修改后，必须手动调用ctx.clearRect(0, 0, canvas.width, canvas.height) - 避免在
drawImage中直接传入跨域图片（即使加了crossOrigin="anonymous"，X5 仍可能拒绝绘制）；优先转为 base64 或走同源代理 - 微信 Android 下
canvas.toDataURL('image/webp')大概率返回空字符串；统一 fallback 到image/png - 动画循环中不要反复调用
canvas.getContext，缓存上下文引用（X5 获取 context 开销比 Chrome 高 3–5 倍）
如何快速验证动画是否真被微信“动了手脚”
别只看开发者工具里的样式面板——X5 渲染层和 JS 层是分离的，样式生效 ≠ 渲染可见。最有效的验证方式是绕过微信，用原生浏览器打开同一链接对比。
- Android：用 Chrome 访问
weixin://协议外的地址（如 http://xxx.com/test.html），确认动画正常后再回微信测试 - iOS：Safari 打开同一页面，重点观察
animationend是否触发、getComputedStyle(el).animationName是否为预期值 - 加一行调试代码：
console.log('raf time:', performance.now())，如果两次 log 差值稳定在 16ms 是正常；若跳变到 30–60ms，基本确定被 X5 节流 - 微信里长按动画区域 → “在浏览器中打开”，能立刻排除是微信 JS SDK 或 JSSDK 注入脚本干扰
真正麻烦的不是写不出动画，而是 X5 内核把「标准行为」变成了「条件触发行为」——比如 visibility 变化、scroll 事件、甚至键盘弹起都可能让正在运行的动画暂停且不通知。上线前至少要在微信 Android 8.0+ 和 iOS 15+ 两个典型环境实机连刷 5 次以上，看有没有偶发白屏或错帧。
