animation-play-state仅对css @keyframes动画有效；它不作用于transition、js动画或svg/smil等。需确保@keyframes名称匹配、animation声明生效且动画处于活跃状态，否则暂停无效。
animation-play-state 只对纯 CSS @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 - SVG SMIL 动画（
<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 切换更适合批量管理，但得加 !important
适合轮播图、加载指示器等需统一控制多个元素的场景：
- CSS 中定义：
.is-paused { animation-play-state: paused !important; }——!important是合理且必要的，用来压制动画规则里默认的running - JS 中切换：
el.classList.toggle('is-paused') - 如果动画靠添加 class 才触发（比如
.animate { animation: bounce 1s; }），要确保.animate和.is-paused同时存在，否则动画根本不会启动
真正难的不是怎么写暂停，而是判断“此刻动画到底有没有在动”。很多人在 setTimeout 里盲目设 paused，却没先检查 el.getAnimations().length > 0 —— 这个数组为空，说明连动画实例都没生成，后续所有操作都只是幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
