能，但仅对已触发且正在播放的CSS动画生效；需确保animation-name已设置、时长非0s，暂停后时间线冻结，恢复时从暂停点继续。
animation-play-state 能被 JS 直接修改吗？
能，但必须作用在触发了 CSS 动画的元素上，且该动画得已开始（animation-name 已生效、时长非 0s）。直接给没动起来的元素设 animation-play-state: paused 是无效的——它不会“预设暂停”，只对正在播放或可播放的状态起作用。
常见错误现象：element.style.animationPlayState = 'paused' 执行后动画照常跑。原因通常是：动画还没触发（比如靠 class 添加才启动），或样式被其他规则覆盖（如内联样式优先级不够）。
- 确保动画已处于「活跃播放中」再调用暂停，例如在
animationstart事件回调里操作 - 避免用
!important写在 CSS 里锁死animation-play-state，JS 修改会被压制 - 如果用
getComputedStyle读取，注意返回的是计算值，但写入必须走style.animationPlayState
用 class 切换 animation-play-state 更可靠？
是的，尤其在需要批量控制、响应式暂停、或与动画生命周期解耦时，CSS class 方案更稳。JS 只负责增删类名，把状态逻辑交给 CSS，避免内联样式污染和优先级冲突。
使用场景：按钮控制轮播图动画、交互中临时冻结加载动画、Canvas 配合 CSS 动画做帧同步等。
立即学习“前端免费学习笔记（深入）”；
- CSS 中定义：
.paused { animation-play-state: paused !important; }（!important在这里合理，用于压制动画规则里的默认值） - JS 操作：
el.classList.add('paused')或el.classList.remove('paused') - 注意：若动画本身用
@keyframes定义但未绑定到元素（即没设animation-name），加.paused也无效
animation-play-state 暂停后，时间线怎么算？
暂停时动画时间线冻结，恢复后从暂停那一刻继续——不是重播，也不是跳到终点。这点和 setTimeout 暂停不同，它是 CSS 渲染引擎原生支持的中间态。
性能影响很小，因为暂停不触发重排重绘；但要注意：如果动画依赖 transform 或 opacity，暂停后这些属性值仍保持最后快照，可能影响后续 JS 读取（比如 getBoundingClientRect() 不变，但视觉已定格）。
- 想获取暂停时刻的精确位置？读
getComputedStyle(el).transform，别依赖 JS 自己计时推算 - 多个动画同时作用于同一元素时，每个都有独立的播放状态，
animation-play-state是按动画名称分别控制的（但 CSS 不支持单个指定，所以通常靠分离 class 或元素来实现） - 兼容性没问题：Chrome 43+、Firefox 16+、Safari 9+、Edge 12+ 均支持
监听 animation-play-state 变化可行吗？
不行。CSS 动画没有专门监听 animation-play-state 改变的事件。你只能监听 animationstart、animationend、animationiteration，或者手动维护一个状态变量配合 JS 控制逻辑。
容易踩的坑：有人试图用 MutationObserver 观察 style 属性变化，但 animation-play-state 改变不会触发 DOM 变更事件，这条路走不通。
- 正确做法：自己记一个布尔值，比如
isAnimationPaused = true，每次 JS 调用暂停/恢复时同步更新它 - 如果要响应外部信号（如页面失焦），监听
visibilitychange并主动调用暂停，而不是等浏览器自动处理 - 不要依赖
animationstate这类不存在的属性或事件——它从未进入标准
最麻烦的地方其实是「暂停时机不可见」：你不知道动画到底卡在哪一帧，除非手动打点或用 requestAnimationFrame 对齐。这点在做精确交互动画时，得靠额外逻辑兜底。
