17370845950

animation-play-state 的两个合法值是 running 和 paused；前者使动画正常播放，后者立即冻结动画于当前帧并可精确恢复至暂停时刻的状态。

animation-play-state 的两个合法值是什么

animation-play-state 只接受两个关键字值：running 和 paused。它不支持 play、resume 或数字、布尔等其他形式。设为 paused 时，动画会**立即冻结在当前帧**，不是跳到开头，也不是缓出停止——就是“时间暂停”式的定格。

• 初始默认值是 running，即使没显式声明，动画也会播放
• 该属性可继承，但通常建议在动画元素本身设置，避免被父级意外覆盖
• 不能用在 @keyframes 规则里，只能作用于应用了 animation 的元素

如何用 JavaScript 动态切换暂停/恢复

通过修改元素的 style.animationPlayState 属性即可实时控制。注意 CSS 属性名是短横线分隔，而 JS 中需转为驼峰写法 animationPlayState。

const box = document.querySelector('.animated-box');
box.style.animationPlayState = 'paused'; // 暂停
box.style.animationPlayState = 'running'; // 恢复

• 直接操作 style 只影响内联样式，优先级高于 CSS 文件中的规则
• 若动画由 class 控制（如 .animate-spin），更推荐用 classList.toggle() 配合 CSS 类切换，语义更清晰
• 不要在 requestAnimationFrame 回调里高频设置它——没必要，且可能触发重排

暂停后恢复，动画是从头开始还是继续原进度

恢复时动画**严格接续暂停前的时间点和状态**。比如一个 2s 的 ease-in-out 动画在 1.2s 处暂停，恢复后会从 1.2s 对应的 keyframe 插值位置继续向 2s 行进，过渡曲线也保持连续。

• 这个行为与 animation-fill-mode 无关，fill-mode 只影响动画开始前/结束后是否保留样式
• 如果需要“重播”，必须先重置 animation：例如临时清空再恢复 animation 值，或用 void el.offsetWidth 强制重流再设回
• 多个动画同时存在时，animation-play-state 会统一作用于所有已声明的 animation，无法单独控制某一个

兼容性与常见失效原因

现代浏览器均支持 animation-play-state，包括 Chrome 43+、Firefox 16+、Safari 9+、Edge 12+。但在 iOS Safari 9.0–9.2 上存在一个经典 bug：对 transform 动画暂停后恢复，可能出现跳变或卡顿。

• 确保元素已正确声明 animation（至少含 animation-name 和 animation-duration），否则 play-state 不生效
• 不要和 animation-delay 混淆：暂停不影响延迟计时，延迟结束后才进入运行/暂停状态
• 使用 CSS-in-JS 库（如 Emotion）时，注意其自动加前缀逻辑是否覆盖 animationPlayState，必要时手动补全 -webkit-animation-play-state

实际用起来最易忽略的是：暂停状态不会阻止动画的计时器，只是视觉冻结；而恢复动作本身没有过渡效果——它是瞬时的。如果需要“渐停”或“淡入恢复”，得靠 JS + 自定义 easing 或多层动画配合实现。