iOS/旧版WebKit中animation-play-state:paused失效时，应改用el.style.animation='none'配合强制重排（如void el.offsetWidth）冻结当前帧，再恢复动画以避免视觉跳变。
animation-play-state: paused 在 iOS/旧版 WebKit 中不生效怎么办
直接设 animation-play-state: paused 在部分 iOS Safari 和旧 Android WebView 中会“失效”——不是卡住，而是动画视觉上消失、元素回退到初始状态，再恢复时从断点继续，破坏连续性。这不是 bug，是这些内核对 animation-play-state 的实现不完整：它们暂停时会丢弃当前动画帧缓存，导致重绘回原始样式。
为什么移除 animation-name 能绕过这个问题
移除 animation-name（或整个 animation）会强制浏览器终止当前动画实例，但关键在于：它不会清空已应用的最终样式（只要没设 animation-fill-mode: forwards），也不会触发回退。配合一次强制重排，就能让元素“停在当前位置”，再加回动画时从头开始——这反而比 paused 更可控。
- 移除动画名后立刻读取
offsetWidth或getBoundingClientRect()，触发同步重排，固化当前视觉状态 - 此时元素样式（如
transform）仍保留最后一帧的计算值，不会跳变 - 再恢复
animation时，浏览器当作新动画启动，可配合animation-delay: 0消除延迟
JS 中安全移除并恢复 animation-name 的写法
不能只改 animationName，必须用 animation 简写属性操作，否则无效。以下是最小可靠路径：
// 暂停（实际是“中断并冻结”） el.style.animation = 'none'; void el.offsetWidth; // 强制重排 // 此时 el 已停在当前帧，样式未丢失 // 恢复（从头播放） el.style.animation = 'rotate_img 10s linear infinite';
- 避免用
el.style.animationName = ''：单独改 name 不触发重排，动画状态可能残留 - 如果动画依赖
animation-fill-mode: forwards，恢复前建议先手动记录并重置终态样式，否则重播时可能叠加 - 在 Vue/React 中慎用此法：若组件重渲染导致
style.animation被覆盖，需在useEffect或mounted中做防抖同步
多个动画共存时怎么精准控制某一个
用 animation-name 移除法天然支持单点控制——你只动某个动画的 name，不影响其他并行动画。但要注意顺序和命名隔离：
立即学习“前端免费学习笔记（深入）”；
- 如果原动画是
animation: fade 0.3s, spin 2s infinite，想只停spin，就构造新简写：animation: fade 0.3s, none - 确保每个动画有唯一
@keyframes名，避免不同动画共用同一名称导致误删 - 动态添加动画时，别拼接字符串生成
animation值；改用 CSS-in-JS 库的 keyframes 辅助函数，或为每个动画分配独立 class
真正难的不是暂停，而是让暂停看起来“没暂停过”——iOS 上的视觉跳变、多动画间的时序错位、JS 重排时机偏差，这些细节一旦漏掉，用户第一眼就感知到卡顿或闪动。
