animation-play-state仅控制@keyframes定义的CSS动画，对transition无效；暂停过渡需用JS操作类名或transition属性；多动画时需按顺序用逗号分隔状态值。
animation-play-state 只能控制 CSS 动画，对 transition 无效
很多人试过给元素加 transition 后设置 animation-play-state: paused，发现完全没反应——因为这个属性压根不作用于 transition。它只对用 @keyframes 定义、通过 animation-name 触发的动画起效。
常见错误现象：animation-play-state 设为 paused 但动画照常运行，大概率是误把 transition 当成了 animation，或者漏写了 animation-name。
- 确认动画定义用了
@keyframes myAnim { ... }，且元素设置了animation-name: myAnim - 如果想暂停过渡效果，得靠 JS 控制类名增删或直接改
transition相关属性（比如清空transition-property） -
animation-play-state是可继承的，但一般不建议依赖继承，显式声明更可靠
JS 中切换 animation-play-state 的正确写法
直接操作 style.animationPlayState 最稳妥，避免被 CSS 层叠覆盖。用 getComputedStyle 读取当前状态时注意：返回的是字符串 "running" 或 "paused"，不是布尔值。
使用场景：点击按钮暂停/继续循环动画，比如轮播图、加载指示器、数据可视化动效。
立即学习“前端免费学习笔记（深入）”；
- 设为暂停：
el.style.animationPlayState = "paused" - 恢复运行：
el.style.animationPlayState = "running" - 读取当前状态：
getComputedStyle(el).animationPlayState === "paused" - 不要用
el.classList.toggle("paused")然后靠 CSS 规则控制——容易和其它动画规则冲突，优先走内联样式
多个动画同时存在时，play-state 是逐个生效的
一个元素可以有多个 animation 值（逗号分隔），比如 animation: fade 2s, slide 1s infinite。此时 animation-play-state 也支持逗号分隔写法，顺序必须和 animation 严格对应。
参数差异明显：单独写 animation-play-state: paused 会暂停所有动画；写成 animation-play-state: running, paused 则只暂停第二个。
- 错误写法：
animation-play-state: paused想只停某个动画——不行，这是全量控制 - 正确做法：明确列出每个动画的状态，如
animation-play-state: running, paused, running - 如果动画数量动态变化（比如 JS 插入新动画），别硬凑逗号列表，改用 class + CSS 规则隔离更可控
兼容性与性能要注意的点
animation-play-state 在现代浏览器中支持良好（Chrome 43+、Firefox 16+、Safari 9+），但 IE10/11 只支持前缀版 -ms-animation-play-state，且行为略有差异：IE 下首次设为 paused 可能不立即生效，需要触发一次重排（如读取 offsetHeight）。
性能影响很小，但它不会中断动画帧——只是让浏览器跳过当前帧的计算和渲染。如果动画本身很重（比如大量 transform + opacity 复合动画），暂停后仍可能残留 layout/reflow 开销。
- 移动端 Safari 对
animation-play-state切换响应稍慢，尤其在复杂 DOM 结构下，可加will-change: transform提前提示 - 不要在 scroll 或 resize 回调里高频切换它，哪怕只是读取
animationPlayState，也可能触发同步计算 - 真正要“冻结”视觉状态，
animation-play-state: paused就够了；想彻底卸载动画逻辑，还是得移除animation-name
