animation-play-state 仅对 @keyframes + animation 定义的动画生效，需满足三条件：@keyframes 正确定义且名称匹配、animation 声明有效且时长非零、动画处于活跃运行中；推荐用 class 切换并严格对应多动画顺序。
支持，但仅限 @keyframes 定义、通过 animation 属性启用的 CSS 动画；transition、requestAnimationFrame、Canvas 或 Three.js 动画完全不响应 animation-play-state。
为什么写了 animation-play-state: paused 却没反应
不是样式写错就万事大吉，必须同时满足三个硬条件：
-
@keyframes已正确定义，且名字与animation-name完全一致（大小写敏感） - 元素上有生效的
animation声明，时长不能为0s，也不能是none - 动画当前处于「活跃运行中」：已过
animation-delay，未自然结束，且没被animation-fill-mode: forwards锁死终态
最靠谱的验证方式是：console.log(getComputedStyle(el).animationPlayState)。返回 "running" 或 "paused" 才说明它“活”着；如果返回空字符串或 "initial"，大概率动画根本没跑起来。
用 class 切换比直接写 style.animationPlayState 更稳妥
内联样式容易被其他 CSS 覆盖，且无法批量管理。推荐在 CSS 中定义：
立即学习“前端免费学习笔记（深入）”；
.animated { animation: slide 3s ease-in-out infinite; }
.animated.is-paused { animation-play-state: paused !important; }
JS 中只需：
- 暂停：
el.classList.add('is-paused') - 恢复：
el.classList.remove('is-paused')
注意：如果动画靠添加 class 才触发（比如 .animate { animation: bounce 1s; }），得确保 .animate 和 .is-paused 同时存在，否则 is-paused 无意义。
多个动画并存时，状态必须严格按顺序匹配
一个元素声明了多个动画：animation: fade 1s, slide 2s infinite, rotate 3s;，那么 animation-play-state 必须用逗号分隔，顺序和 animation 值严格对应：
- 全部暂停：
animation-play-state: paused, paused, paused; - 只暂停第二个：
animation-play-state: running, paused, running;
漏写或顺序错位，未指定的部分会按默认 running 处理——看起来就像“没停住”。
真正容易被忽略的是：浏览器后台标签页冻结动画后，animation-play-state: running 只会续播，不会重播；iOS Safari 尤其不可靠。要真正重播，必须移除动画 class → 强制 offsetHeight reflow → 再加回 class，且 animation-fill-mode 得设为 none。
