加 animation-play-state: paused 动画仍运行，主因是动画未真正启动：animation-duration 为 0s 或 auto，或 animation-name 指向未定义/空的 @keyframes；需确保 @keyframes 正确定义、duration > 0s，且先通过 animation 简写或属性组合激活动画。
直接用 animation-play-state 控制暂停/播放，但必须确保动画已通过 animation-name 和 animation-duration 正确定义，否则设为 paused 也无效。
为什么加了 animation-play-state: paused 动画还在动？
常见原因是动画根本没真正启动：要么 animation-duration 是 0s，要么 animation-name 指向一个不存在或空的 @keyframes。浏览器会静默忽略非法动画声明，play-state 失去作用对象。
检查要点：
- 确认
@keyframes myMove已正确定义，且至少包含from和to或两个百分比关键帧 -
animation-duration必须是大于0s的值（如2s），不能是0或auto - 不要只写
animation-play-state，它不触发动画，得靠animation简写或基础属性组合先激活动画
用 JavaScript 切换 animation-play-state 的正确姿势
直接操作 style.animationPlayState 最可靠，避免 class 切换时因 CSS 优先级或缓存导致状态不同步。
实操建议：
- 初始样式里设好
animation: slide 3s infinite，再用 JS 控制状态 - 切换时统一用
element.style.animationPlayState = 'running'或'paused' - 如果用 class 控制，确保目标 class 的 specificity 足够高，例如加
!important（.paused { animation-play-state: paused !important; }） - 注意：IE10+ 和现代浏览器都支持该属性，但 Safari 旧版本（≤6）需加
-webkit-animation-play-state
animation-play-state 对性能和行为的影响
设为 paused 时，动画时间轴冻结，当前状态（位置、透明度等）保持不变，但不会触发重排或重绘——这点比用 display: none 或 visibility: hidden 更轻量。
需留意的边界情况：
- 动画处于
forwards填充模式时，暂停在末尾帧和播放完成效果一致；但若中途暂停，再设为running会从暂停处继续，不是重播 - 多个动画同时作用于同一元素时，
animation-play-state是全局控制（所有动画一起暂停），无法单独控制某一个 - 用
requestAnimationFrame配合手动更新样式实现“伪暂停”更灵活，但没必要——原生play-state已足够稳定
最易被忽略的是：动画未定义 animation-fill-mode 时，暂停后元素可能回退到初始状态（尤其在 animation-direction: alternate 下），建议明确设为 forwards 或 both 来保帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
