浏览器标签页隐藏时css动画挂起是正常节电行为，所有主流浏览器均如此；重播需通过class切换+强制reflow实现，避免animation-play-state无效及ios safari兼容问题。

浏览器标签页隐藏时CSS动画挂起是正常行为，不是bug

所有主流浏览器（Chrome、Firefox、Safari、Edge）都会在标签页不可见时主动挂起 CSS 动画的帧调度——这是节电策略，不是渲染故障。此时 element.style.animationPlayState 读出来仍是 "running"，但合成线程已冻结时间轴，实际不生成新帧。CPU 几乎为 0，属于理想节能状态。

animation-play-state 无法重播，只会继续冻结位置

监听 visibilitychange 后直接设 el.style.animationPlayState = 'running' 通常无效，原因很实在：

• 它不重置动画时间轴：后台停留 12 秒，回来就从第 12 秒继续，不是重播
• iOS Safari（尤其微信 WebView）对 runtime 修改 animationPlayState 支持差，常忽略或延迟生效
• 若动画用了 animation-fill-mode: forwards，元素已停在终态，再设 running 不会触发新周期

可靠重播必须用 class 切换 + 强制 reflow

真正起作用的做法是让浏览器“认为这是一个新动画”。最小可行流程：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 把动画逻辑封装进独立类，例如 .animate-fade-in，且不含 animation-fill-mode: forwards
• 初始状态用另一个类控制（如 .is-hidden），确保隐藏时无 animation 声明
• 监听 visibilitychange，当 document.visibilityState === 'visible' 时：
  • 先移除动画类：el.classList.remove('animate-fade-in')
  • 强制同步 reflow：el.offsetHeight 或 getComputedStyle(el).opacity
  • 再添加动画类：el.classList.add('animate-fade-in')

移动端和 iOS Safari 的几个硬坑

这些细节不处理，class 切换也会静默失败：

• iOS Safari 对 visibilitychange 响应常延迟 200–500ms，建议加 setTimeout(() => { /* class 切换 */ }, 100)
• 若元素已有内联 style.transform，再通过 CSS 类触发 transform 动画，两者会冲突导致跳帧；重播前清空：el.style.transform = ''
• animation-duration 低于 0.15s（150ms）时，部分 Android WebView 可能跳过首帧
• 别只依赖 visibilitychange：同时监听 pagehide、pageshow、focus，任一触发都尝试重置

重播逻辑本身不复杂，但 iOS 和 Android WebView 的响应延迟、样式冲突、首帧丢弃这些点，稍不注意就让动画“看起来没动”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！