直接用 element.style.animationplaystate = 'paused' 或 'running' 可控制纯 css @keyframes 动画，但 canvas、three.js、requestanimationframe 等完全不响应；需确保动画已启动且名称匹配、duration 非零，并通过 getcomputedstyle(el).animationplaystate 验证状态。
直接用 element.style.animationPlayState = 'paused' 或 'running' 就能控制，但前提是动画必须是纯 CSS @keyframes 动画——其他类型（Canvas、Three.js、requestAnimationFrame）完全不响应这个属性。
确认动画是否支持 animation-play-state
很多“暂停无效”问题，其实动画压根没跑起来。必须同时满足：
-
@keyframes名称和animation-name完全一致（大小写敏感，spin≠Spin） - 元素上有生效的
animation声明，且animation-duration不为0s - 动画处于活跃状态：不是刚插入 DOM 还没触发，也不是已自然结束 +
animation-fill-mode: forwards锁定了终态
最靠谱验证方式：console.log(getComputedStyle(el).animationPlayState)。返回 "running" 或 "paused" 才说明它“活”着；返回空字符串或 "initial"，基本等于没启动。
用按钮切换 animationPlayState 的正确写法
JS 中必须用驼峰命名 animationPlayState，写成 animation-play-state 会语法报错。内联样式优先级最高，推荐直接操作 style：
- 暂停：
el.style.animationPlayState = 'paused'; - 恢复：
el.style.animationPlayState = 'running';（不能设为空字符串或''，否则回退到 CSS 规则值） - 读取当前状态：
getComputedStyle(el).animationPlayState === 'paused'
如果按钮要控制多个元素，用 class 切换更合适，但记得加 !important 确保压制默认动画规则：.is-paused { animation-play-state: paused !important; }，再用 el.classList.toggle('is-paused')。
多个 CSS 动画并存时的注意事项
当一个元素有多个动画（如 animation: fade 1s, slide 2s infinite;），animationPlayState 支持逗号分隔，但顺序必须严格对应：
- 暂停第一个、运行第二个：
el.style.animationPlayState = 'paused, running'; - 顺序错位或数量不匹配，会导致部分动画失控或静默失败
- 用
getComputedStyle(el).animationPlayState读取时，返回的也是逗号分隔的字符串，需按位解析
别指望靠一次 pause() 覆盖所有动画逻辑——CSS 动画之间彼此独立，状态也得分别管理。
为什么点了按钮动画还在动
大概率你正在控制的不是 CSS 动画：
- 用
el.animate()（Web Animations API）？该用anim.pause()，不是改animationPlayState - 用
transition做淡入/位移？它没有“暂停”概念，只能清掉transition-property或切 class - Canvas / Three.js /
requestAnimationFrame循环？这些必须手动冻结时间戳、速度、位置等状态变量，animation-play-state对它们完全无效
真正难的不是写两行 JS，而是先分清你用的到底是什么动画机制——选错控制路径，后面全是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
