Safari后台冻结CSS动画需用JS强制重播：先移除动画类，再通过offsetHeight触发reflow，最后重新添加类；须清空内联transform、监听多事件兜底、动画时长≥150ms且禁用forwards。
当你在 Safari 中切换到其他标签页或最小化浏览器窗口时，网页里的 CSS 动画会突然卡住不动，切回来后也不从头播——这不是代码写错了，而是 Safari 主动冻结了动画时间轴以节省电量，必须用 JS 强制重置动画实例才能真正重播。
用 class 切换 + offsetHeight 触发 reflow 重播动画
第一步：把动画逻辑单独抽成一个类，比如 .pulse，只写 animation 声明，且必须加 【animation-fill-mode: none】：
.pulse { animation: pulse 1.2s ease-in-out; animation-fill-mode: none; }
第二步：监听 visibilitychange 事件，在页面重新可见时执行三连操作：
立即学习“前端免费学习笔记（深入）”；
→ 先移除动画类：el.classList.remove('pulse')
→ 立即触发同步 reflow：el.offsetHeight（这一步不能省，否则后续添加类无效）
→ 再添加动画类：el.classList.add('pulse')
第三步：如果元素之前被 JS 设置过 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，它和后台冻结完全无关，强行加上反而可能干扰硬件加速层，引发闪烁或卡顿。
