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
