浏览器切后台时CSS动画被主动冻结或降频，非bug而是省电节流行为；应通过class切换+offsetHeight强制重排实现可靠重播，并确保animation-fill-mode: none、duration≥150ms、清空内联transform。
浏览器切到后台标签页时，CSS 动画不是“卡了”，而是被主动冻结或大幅降频——这是所有主流浏览器（Chrome、Firefox、Safari）的默认行为，目的明确：省电、降负载。你看到的跳帧、重播、错位、突变，全是这个机制的直接结果，不是代码写错了。
animation-play-state: running 根本没用
很多人试过在 visibilitychange 里设 el.style.animationPlayState = 'running'，但发现毫无反应。原因很实在：
-
getComputedStyle(el).animationPlayState可能仍返回"running"，但合成线程早已挂起，一帧都没渲染 - 后台期间时间轴仍在走，切回来只是“续播”，比如停了 8.3 秒，动画直接跳到第 8.3 秒对应的关键帧
- iOS Safari 和微信 WebView 对该属性支持极差，常忽略或延迟生效
真正可靠的重播：class 切换 + offsetHeight 强制 reflow
想让动画“像第一次那样播”，必须骗浏览器：这不是 resume，是全新开始。三步缺一不可，顺序不能错：
- 先移除动画 class：
el.classList.remove('spin') - 立刻触发同步 layout：
el.offsetHeight（不能省，不能用offsetWidth替代，必须是布局相关读取） - 再加回动画 class：
el.classList.add('spin')
同时确保动画 class 中声明：animation-fill-mode: none；若设了 forwards，终态样式会“锁死”，重播直接失败。另外，animation-duration 建议 ≥ 150ms，否则部分 Firefox 和 Android Webview 会跳过首帧。
立即学习“前端免费学习笔记（深入）”；
@keyframes 里别混动 transform 和 opacity 等属性
复合动画错乱，常因不同属性节奏不一致。比如同一段 @keyframes 里同时写 transform: scale() translate() 和 background-color，切回前台时时间戳断层，浏览器按当前时间重算各属性值，导致视觉脱节。
- 一个
@keyframes块里只动一类可硬件加速的属性（推荐仅transform或仅opacity） - 如需多属性协同，拆成多个独立动画，用
animation-delay错开启动时机 - 避免在关键帧中写
top/left这类触发布局的属性，它们无法 GPU 加速，且易与 transform 冲突
移动端和 SPA 场景要额外兜底
iOS Safari 的 visibilitychange 响应慢（200–500ms），息屏甚至不触发；单页应用中 DOM 可能被销毁重建，动画上下文彻底丢失。
- 别只监听
visibilitychange，补上pagehide、pageshow、focus事件 - 在
pageshow或组件onappear钩子中执行上述三步重播逻辑，并用setTimeout(() => { /* 重播 */ }, 100)避免元素未完全挂载 - 如果元素有 JS 设置的内联
transform（比如el.style.transform = 'scale(0.9)'），重播前先清空：el.style.transform = ''，否则和 CSS 动画冲突
最常被忽略的一点：浏览器永远不会替你“撤销”动画结束态，也不会在 DOM 重建后自动恢复动画上下文。每次切回前台，都得当作一个新起点来处理重排时机和样式归零。
