animation-play-state仅对@keyframes动画有效，需同时满足：正确定义且名称匹配、animation声明生效且时长非0、动画处于活跃运行中；验证用getComputedStyle(el).animationPlayState。
animation-play-state 只对 @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"，大概率动画根本没跑起来。
el.style.animationPlayState 是 JS 中最稳的控制方式
直接操作内联样式，不依赖 class 层叠，也不怕被其他 CSS 覆盖：
- 暂停：
el.style.animationPlayState = 'paused'; - 恢复：
el.style.animationPlayState = 'running';（不能留空或设成''，否则回退到 CSS 规则值） - 读取状态：
getComputedStyle(el).animationPlayState === 'paused'
注意：el.style.animation-play-state 是错的写法，JS 中必须用驼峰命名 animationPlayState，否则语法错误。
用 class 切换更适合批量控制和维护
适合轮播图、加载指示器等需统一管理多个元素的场景：
- CSS 中定义：
.is-paused { animation-play-state: paused !important; }（!important是合理且必要的，用来压制动画规则里的默认值） - JS 中切换：
el.classList.toggle('is-paused') - 如果动画靠添加 class 才触发（比如
.animate { animation: bounce 1s; }），得确保.animate和.is-paused同时存在
避免把暂停逻辑写进 requestAnimationFrame 循环里反复调用——每帧都设一次 animationPlayState 可能引发抖动。
多个动画并存时，状态必须严格按顺序匹配
一个元素可以声明多个动画：animation: fade 1s, slide 2s infinite, rotate 3s;。此时 animation-play-state 必须用逗号分隔，顺序和 animation 值严格对应：
- 全部暂停：
animation-play-state: paused, paused, paused; - 只暂停第二个：
animation-play-state: running, paused, running; - 单独写
animation-play-state: paused会暂停所有动画，无法只控某一个
若需真正独立控制单个动画，只能拆到不同 DOM 元素上，或改用 el.getAnimations() 手动筛选并调用 pause()（注意兼容性）。
最容易被忽略的一点：动画尚未开始（还在 animation-delay 阶段）或已经自然结束，此时设 paused 没有任何视觉变化——它不会“唤醒”动画，也不会“重启”动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
