应优先使用 requestAnimationFrame 替代 setTimeout 实现动画主循环，因其由浏览器统一调度、自动适配刷新率且页面不可见时暂停；CSS 动画需优先使用 transform 和 opacity 属性以避免重排重绘，并通过 @supports 和特性检测实现兼容性降级。
用 requestAnimationFrame 替代 setTimeout 做动画主循环
直接用 setTimeout 控制帧率，容易掉帧、时间不准，且在后台标签页中仍持续执行，耗电又卡顿。现代浏览器普遍支持 requestAnimationFrame，它由浏览器统一调度，自动适配刷新率，并在页面不可见时暂停调用。
- 必须用递归方式调用：
function animate() { /* 动画逻辑 */ requestAnimationFrame(animate); } - 不要硬编码 60fps（如
setTimeout(..., 16)），requestAnimationFrame本身不保证一定是 60fps，可能为 30/48/120，取决于设备和系统负载 - 旧版 IE（≤9）不支持，需 fallback：检测
window.requestAnimationFrame是否存在，不存在则退回到setTimeout，但注意加节流（如最小间隔设为 25ms 防止过度触发）
CSS 动画优先用 transform 和 opacity 属性
浏览器对 transform（平移、缩放、旋转）和 opacity 的动画能走合成层（compositor layer），不触发重排（reflow）和重绘（repaint），性能高、兼容好。而 left、top、width、height 等会频繁触发布局计算，尤其在低端 Android 或 Safari 上明显卡顿。
- 避免写
div { left: 10px; transition: left 0.3s; }，改用transform: translateX(10px) - IE10+ 支持
transform，但需加-ms-前缀（仅 IE10）；iOS Safari 7.1+、Android Browser 4.4+ 均原生支持无前缀版本 - 若需 3D 效果（如翻转），加上
transform-style: preserve-3d和backface-visibility: hidden可防止部分 Android 4.x 渲染异常
检测动画支持并降级：用 @supports + Modernizr 组合判断
单纯靠 UA 判断浏览器能力不可靠，尤其是国产双核浏览器（如 QQ、360）常伪装成 Chrome 却缺失某些 API。推荐分层检测：CSS 层用 @supports，JS 层用特性检测库或手写判断。
- CSS 中写动画前先兜底：
@supports (animation-name: test) and (transform: translateZ(0)) { .box { animation: slide 1s; transform: translateX(100px); } } @supports not (animation-name: test) { .box { opacity: 1; } /* 禁用动画，只保留最终态 */ } - JS 中可轻量检测：
if ('requestAnimationFrame' in window && CSS.supports('transform', 'translateZ(0)')) { /* 启用高级动画 */ } - 不用全量引入 Modernizr，只需按需检测几个关键项（如
csstransforms、cssanimations），其官网提供定制构建
移动端 iOS Safari 和 Android WebView 的常见坑
iOS Safari 对 will-change、transform 层叠上下文、滚动绑定动画等处理特别敏感；Android 4.4–6.x 的 WebView 则对 transform-origin 解析不稳定，且 animation-fill-mode 支持不一致。
立即学习“前端免费学习笔记（深入）”；
- 强制开启硬件加速别滥用：
transform: translateZ(0)或will-change: transform能提升动画流畅度，但过多使用会导致内存暴涨甚至白屏（尤其 iOS 12 以下） - Android 4.4 WebView 不支持
animation-fill-mode: forwards，动画结束后元素会回弹，需 JS 手动设置最终样式（如监听animationend后写el.style.transform = 'translateX(100px)'） - iOS Safari 在
position: fixed元素上做transform动画，可能触发闪烁，解决办法是给父容器加transform: translateZ(0)或backface-visibility: hidden
实际做兼容性动画，最难的不是写法，而是验证——不同 Android 厂商定制 ROM 的 WebView 行为差异极大，光靠模拟器不够，必须在真机（特别是低端机型）上反复测滚动中断动画、快速切换标签页后的状态恢复、横竖屏切换时的 transform 错位等问题。
