动画在页面切到后台后“停止”不是bug，而是浏览器主动节电行为；直接设animationPlayState="running"无效，因时间轴未重置、iOS Safari兼容性差且终态无法重启，必须通过class移除→强制reflow→class重加三步触发DOM重解析实现可靠重播。
动画在页面切到后台后“停止”，不是 bug，是浏览器主动节电行为；直接设 animationPlayState = "running" 无法重播，必须强制重绘并重新挂载动画类。
为什么 visibilitychange 后设 animationPlayState 没用
常见错误是监听 visibilitychange 后写 el.style.animationPlayState = "running"，但这样只会继续播放——不是从头播。原因有三：
- 动画时间轴未重置：后台停留 15 秒，回来后直接从第 15 秒帧继续，人眼看不到过程
- iOS Safari 对该属性 runtime 修改极不敏感，尤其刚唤醒时经常忽略
- 若动画已因
animation-fill-mode: forwards停在终态，running不会触发新周期——它已被视为“已完成”
正确做法：用 class 切换 + 强制 reflow 触发重播
核心是让浏览器把动画当作“新声明”来处理。必须三步闭环：
- 先移除动画类：
el.classList.remove("animate-in") - 立即触发 reflow：
el.offsetHeight或getComputedStyle(el).opacity（任一读取布局的 API） - 再添加动画类：
el.classList.add("animate-in")
不能省略第二步，否则浏览器仍走缓存路径，不会重新解析 @keyframes。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的兼容性坑
即使按上述流程，某些场景下仍不重播：
- iOS Safari（尤其微信 WebView）对
visibilitychange响应延迟可达 300ms+，建议加setTimeout(() => { ... }, 100) - 元素若有内联
style.transform，和@keyframes中的transform冲突，导致重播失败；统一用 CSS 类管理 transform 状态 -
animation-duration小于0.15s时，部分 Android Webview 会跳过首帧；最低设为0.15s
真正难的不是写对三行 JS，而是意识到：浏览器不提供“重播动画”API，所有可靠方案都得绕道 DOM 重解析——而 reflow 是唯一能骗过渲染引擎的合法手段。
