在 Safari 里切个标签页，或者把窗口最小化一会儿，回来发现页面上那个本该一直旋转的加载动画突然卡住了——不是代码写错了，是 Safari 主动把动画时间轴给冻住了。它这么干是为了省电，但后果就是动画既不停在最后一帧，也不从头重播，直接僵在那里。要解决这个问题，得用 Ja vaScript 强制重置动画实例，让它真正重播一次。

用 class 切换 + offsetHeight 触发 reflow 重播动画

第一步，把动画逻辑单独抽成一个 class，比如 .pulse，里面只写 animation 声明，并且一定要加上 animation-fill-mode: none：

.pulse {
  animation: pulse 1.2s ease-in-out;
  animation-fill-mode: none;
}

第二步，监听 visibilitychange 事件，在页面重新可见时执行三步连招：

• 先移除动画 class：el.classList.remove('pulse')
• 立即触发同步 reflow：el.offsetHeight（这步不能省，否则后面添加 class 不会生效）
• 再添加动画 class：el.classList.add('pulse')

第三步，如果元素之前被 Ja vaScript 设置过 el.style.transform，重播前必须把它清空，否则会和 CSS 动画里的 transform 冲突，轻则跳帧，重则直接不触发——el.style.transform = '' 一定要写上。

兜底监听多个事件避免 iOS Safari 延迟失效

iOS Safari 对 visibilitychange 的响应有时会比较慢，甚至息屏时根本不触发。微信 WebView 里更离谱，经常把 document.visibilityState 错误地报告为 'visible'。所以单靠一个 visibilitychange 远远不够。

方法一：同时监听 visibilitychange、pageshow、focus 三个事件，任何一个触发都执行重播逻辑。

方法二：在 visibilitychange 回调里加一个 setTimeout(() => { /* 重播逻辑 */ }, 100)，避开 iOS 的初始延迟窗口。

有一点要注意：千万别去监听 pagehide 来暂停动画——Safari 后台冻结是不可逆的，暂停操作毫无意义，只做恢复处理就行。

动画时长与属性避坑设置

animation-duration 必须 ≥ 0.15s（150ms），低于这个值的话，部分 iOS WebKit 和 Android Webview 会直接跳过首帧，重播就失败了。

绝对不要使用 animation-fill-mode: forwards——它会让动画停留在终态，之后再怎么切换 class 都不会重播，因为浏览器认为“动画已经完成了”。

另外，别碰 backface-visibility，它跟后台冻结完全无关，强行加上反而可能干扰硬件加速层，引起闪烁或卡顿。

《夸克》非常好用的免费AI浏览器

下载APP查看