animation-play-state 属性通过 running 和 paused 值控制动画暂停与继续，可继承、支持 transition，js 可动态修改 style.animationPlayState，但仅影响已启动动画，单次动画结束后设 running 不重播，需重置 animation 才能重启。
animation-play-state 控制暂停与继续
css 动画的暂停和继续，核心靠 animation-play-state 属性，它只有两个合法值：running 和 paused。设置在动画元素上即可实时生效，无需重新定义关键帧或触发重绘。
- 该属性可继承，但通常直接作用于动画元素更可控
- 支持 CSS 过渡（transition），比如用
transition: animation-play-state 0.2s实现淡入式暂停感 - 注意：它只影响当前已开始的动画实例；若动画已结束（
animation-fill-mode未设为forwards），再设running不会重播
javaScript 动态切换播放状态
通过 JS 修改 style.animationPlayState 是最常用方式，适合绑定按钮、滚动监听或事件触发场景。
const box = document.querySelector('.animated-box'); const toggleBtn = document.querySelector('#toggle-btn'); toggleBtn.addEventListener('click', () => { const currentState = box.style.animationPlayState; box.style.animationPlayState = currentState === 'paused' ? 'running' : 'paused'; });- 读取时优先取内联样式（
element.style.animationPlayState），若为空需用getComputedStyle()获取计算值 - 不要用
className切换类名来控制状态——除非你提前在 CSS 中定义了.paused { animation-play-state: paused; }，否则 class 方式无法覆盖原动画的内联running - 多个动画同时存在时，该属性统一控制所有
animation-name，无法单独暂停某一个
配合 animation-delay 和 animation-iteration-count 的注意事项
暂停/继续行为在循环动画中表现自然，但在单次动画（animation-iteration-count: 1）或带延迟（animation-delay）的场景下容易误判状态。
- 动画尚未到达
animation-delay时间点时，animation-play-state: paused无效——此时动画根本没启动，设paused无意义 - 单次动画播放完毕后，即使设为
running，也不会重播；必须配合animation-direction: alternate或重置animation-name（如先设空再恢复）才能“重启” - 若用 JS 暂停后想彻底重置动画，推荐
el.style.animation = 'none'; setTimeout(() => el.style.animation = originalAnimationValue, 0)，避免状态残留
兼容性与 fallback 处理
animation-play-state 在现代浏览器中支持良好（chrome 43+、firefox 16+、safari 9+、edge 12+），但 ios Safari 8–11.3 存在 bug：暂停后再继续可能跳过部分关键帧。
立即学习“前端免费学习笔记（深入）”；
- 对老版本 iOS Safari，可用
transform: scale(0.999)强制重绘 + 短暂延时恢复来绕过渲染异常 - 服务端或构建时可加 postcss 插件自动补全
-webkit-animation-play-state，但目前主流已无需手动加前缀 - 纯 CSS 方案无法监听暂停事件，如需精确感知状态变化，仍要结合 JS 的
animationstart/animationend配合定时轮询getComputedStyle
实际中最容易被忽略的是：暂停后元素的视觉状态是“冻结在那一刻”，但 transform、opacity 等属性不会回退——如果你依赖这些值做后续逻辑，得自己记录暂停时刻的 computed style。