animation-play-state 仅对已激活的动画生效，需同时满足定义@keyframes、元素有非零时长animation声明、动画处于活跃播放中三个条件，否则无效。
animation-play-state 必须配合已生效的 animation 才能动态控制
单独写 animation-play-state: paused 没用，它不启动动画，只暂停“正在跑”的动画。常见错误是只在 :hover 里加这一句，但元素本身没声明 animation，结果悬停毫无反应。
必须同时满足三个条件：已定义匹配的 @keyframes、元素上有非零时长的 animation 声明（如 animation: slide 2s infinite）、动画当前处于活跃播放中（不是刚插入 DOM 或已自然结束）。
验证是否生效最直接的方法是：console.log(getComputedStyle(el).animationPlayState)。返回 "running" 或 "paused" 才说明它被真正识别；若返回空字符串或 "initial"，基本等于没跑起来。
:hover 切换是最简可行方案，但写法有硬约束
鼠标悬停暂停轮播图这类需求，用纯 CSS 最省事：
div {
animation: fade 3s infinite;
}
div:hover {
animation-play-state: paused;
}
注意这些细节：
- 不能把
animation声明只放在:hover里——animation-play-state不会“唤醒”未启用的动画 - 避免在
:hover中写animation: none或animation: unset，这会清空动画，不是暂停，而是终止+重置帧 - 如果父容器有
overflow: hidden且子元素动画位移超出边界，悬停暂停后可能视觉卡顿，需检查transform是否触发了新层叠上下文
JavaScript 控制更灵活，但命名和读取方式容易出错
按钮切换、键盘事件、滚动触发动画等场景，JS 是刚需。关键点就两个：
一是设值必须用驼峰：el.style.animationPlayState = 'paused'，写成 el.style.animation-play-state 会语法报错；
二是读取状态不能只看 el.style.animationPlayState（它只返回内联样式），为空时得 fallback 到 getComputedStyle(el).animationPlayState。
多个动画并存时，animation 值是逗号分隔的（如 fade 1s, slide 2s infinite），那么 animation-play-state 也必须严格对应顺序写成 paused, running，漏掉一个就会按默认 running 处理。
class 切换适合批量管理，但需要 !important 镇场
轮播组件里常要统一控制多个子项，用 class 比反复操作 style 更易维护：
.is-paused {
animation-play-state: paused !important;
}
!important 在这里是合理且必要的——它压制原始动画规则里的默认 running，否则 class 切换根本不起作用。
JS 侧只需：el.classList.toggle('is-paused')。但要注意：如果动画本身靠添加另一个 class（比如 .animate）才触发，那得确保 .is-paused 的选择器权重足够高，或者直接加在同一个元素上，别指望父容器 class 能穿透影响子元素的动画状态。
最容易被忽略的是单次动画（animation-iteration-count: 1）和带延迟（animation-delay）的情况：动画还没到延迟时间点，paused 就是无效的；单次播完再设 running 也不会重播，得手动重置 animation 值或触发 reflow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
