移动端CSS动画不触发或卡顿主因是浏览器降级渲染：禁用非transform/opacity属性动画、裁剪合成层、隐藏状态跳帧等；raf在微信iOS版存在后台切回后失效bug；Canvas需适配DPR；SVG SMIL动画iOS已移除。
移动端 CSS 动画不触发或卡顿的常见原因
HTML5 动画在移动端“看起来没动”“闪一下就停”“滚动时突然卡住”，大概率不是代码写错了，而是浏览器主动降级或跳过了渲染。iOS Safari 和部分安卓 WebView 对 transform、opacity 以外的属性动画（比如 left、background-color）会拒绝硬件加速，且默认禁用非可见区域的动画帧。
- 避免用
left/top做位移动画，改用transform: translateX()—— 否则 iOS 15+ 会静默丢弃帧 - 给动画元素加
will-change: transform（仅对频繁变化的元素），但别滥用，否则内存暴涨 - 确保父容器没有
overflow: hidden+transform组合，这在某些安卓机型上会截断合成层，导致动画被裁剪 - 检查是否在
visibility: hidden或display: none状态下启用了动画 —— 大部分 WebView 不会预热帧，首次显示时直接跳到终点
requestAnimationFrame 在 iOS 微信内置浏览器中失效怎么办
微信 iOS 版（尤其是 8.0.40–8.0.47）存在 requestAnimationFrame 在页面切后台再切回后永久停止回调的问题，不是你漏写了 cancelAnimationFrame，是 WebView 内核 bug。
- 不要依赖单次
requestAnimationFrame做关键路径动画，改用setTimeout(fn, 16)+ 时间戳校准（兼容性更稳） - 监听
pageshow和pagehide事件，在pageshow中重置动画状态并手动触发一帧 - 若必须用
raf，每次调用前加判断：if (typeof requestAnimationFrame === 'function') { ... }，防止某些降级 WebView 返回undefined
Canvas 动画在高 DPR 屏幕上模糊或掉帧
Canvas 本身不自动适配设备像素比（DPR），直接用 canvas.width/canvas.height 设为 CSS 尺寸，会导致绘制内容被拉伸、文字发虚、粒子动画糊成一片。
- 获取真实绘制尺寸：
const dpr = window.devicePixelRatio || 1;，然后设置canvas.width = width * dpr，canvas.height = height * dpr - 用
ctx.scale(dpr, dpr)缩放绘图上下文，这样所有坐标逻辑仍按 CSS 像素写，不用重算 - 动画循环中避免每帧都调用
ctx.clearRect(0, 0, canvas.width, canvas.height)—— 高 DPR 下清屏成本陡增，可改用ctx.save()/ctx.restore()或局部重绘 - 安卓低端机上
canvas.toDataURL()导出图片可能黑屏，这是 GPU 内存不足导致的，需提前用canvas.getContext('2d', { willReadFrequently: true })显式声明
SVG SMIL 动画在 iOS 上完全不运行
立即学习“前端免费学习笔记（深入）”；
- 立刻停用 SMIL，改用 CSS
@keyframes+transform控制 SVGtransform属性 - 若需 JS 动态控制（如路径描边进度），用
stroke-dasharray+stroke-dashoffset配合requestAnimationFrame或 CSS 自定义属性驱动 - 注意：CSS 动画作用于 SVG 元素时，
transform-origin默认是左上角，不是中心，需显式设为center或具体坐标
移动端动画最麻烦的从来不是“怎么让它动”，而是“怎么让它在各种 WebView 里稳定地、不闪、不糊、不卡地动”。很多异常表现背后是合成层分裂、DPR 失控、或内核悄悄禁用了某类渲染管线 —— 查问题时先看 DevTools 的 Layers 面板和 Rendering > FPS Meter，比翻控制台报错有用得多。
