animation-play-state仅对@keyframes动画生效，需满足名称一致、animation声明有效且动画处于活跃状态；js操作用el.style.animationplaystate，css控制用.is-paused类加!important。
animation-play-state 只对 @keyframes 动画生效
设了 animation-play-state: paused 却没反应？八成你正在控制 transition、requestAnimationFrame、Canvas 或 Three.js 动画——这些完全不认这个属性。它只响应由 @keyframes 定义、再通过 animation 属性挂载到元素上的动画。
常见误判场景：
- 给一个靠 JS 每帧更新
transform的滚动字幕加.paused { animation-play-state: paused; }→ 白搭 - 用
transition: opacity 0.3s做淡入，想暂停它 → 得清掉transition-property或切 class，别碰animation-play-state -
SVGSMIL 动画（<animate></animate>标签）或 Web Animations API（el.animate()）→ 要调anim.pause()，不是改 CSS
动画“真正在跑”才可被暂停
很多问题不是写法错，而是动画压根没启动。必须同时满足三个硬条件：
-
@keyframes名称和animation-name完全一致（大小写敏感，spin≠Spin） - 元素上有生效的
animation声明，且animation-duration不为0s - 动画正处于活跃状态：不是刚插入 DOM 还没触发，也不是已自然结束 +
animation-fill-mode: forwards锁定了终态
最靠谱验证方式：console.log(getComputedStyle(el).animationPlayState)。返回 "running" 或 "paused" 才说明它“活”着；如果返回空字符串或 "initial"，基本等于没跑起来。
JS 中直接操作 style.animationPlayState 最稳
不用管 class 层叠、不用怕 CSS 规则覆盖，内联样式优先级最高：
- 暂停：
el.style.animationPlayState = 'paused'; - 恢复：
el.style.animationPlayState = 'running';（不能留空或设成''，否则回退到 CSS 规则值） - 读取当前状态：
getComputedStyle(el).animationPlayState === 'paused' - 多个动画并存时（如
animation: fade 1s, slide 2s infinite;），animationPlayState支持逗号分隔：el.style.animationPlayState = 'paused, running';，但顺序必须和animation值严格对应 - 注意：
el.style.animation-play-state是错的写法，JS 中必须用驼峰命名animationPlayState，否则语法报错
用 class 切换更适合批量管理
适合轮播图、加载指示器等需统一控制多个元素的场景：
- CSS 中定义：
.is-paused { animation-play-state: paused !important; }——!important是合理且必要的，用来压制动画规则里的默认值 - JS 中切换：
el.classList.toggle('is-paused') - 避免把暂停逻辑写进事件回调里反复调用，比如不要在
requestAnimationFrame循环里每帧都设一次animationPlayState，可能引发抖动 - 如果元素动画靠添加 class 才触发（比如
.animate { animation: bounce 1s; }），那得确保.animate和.is-paused同时存在，且后者优先级足够高
容易被忽略的是：动画尚未到达 animation-delay 时间点时，animation-play-state: paused 无效——此时动画根本没启动，设 paused 无意义；单次动画播放完毕后，即使设为 running，也不会重播。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
