可通过 animation-play-state 控制 CSS 动画暂停（paused）与继续（running），支持内联样式设置或 class 切换，保持动画进度连续性，现代浏览器兼容良好。
通过修改 animation-play-state 属性，可以控制 CSS 动画的暂停与继续：设为 paused 暂停，设为 running 继续。
直接修改元素的内联样式
这是最常用、最直接的方式。JavaScript 中通过 element.style 设置：
- 暂停动画：
element.style.animationPlayState = 'paused'; - 继续动画：
element.style.animationPlayState = 'running';
注意：该写法使用驼峰命名（animationPlayState），对应 CSS 中的连字符写法 animation-play-state。它只影响内联样式，优先级高，会覆盖 CSS 文件中的定义。
切换 class 类名来控制状态
更推荐的维护方式是预先在 CSS 中定义好状态类，再用 JS 切换：
立即学习“前端免费学习笔记（深入）”；
CSS 部分：
.animated { animation: slide 2s infinite; }
.paused { animation-play-state: paused; }
.running { animation-play-state: running; }
JS 部分：
- 暂停：
element.classList.add('paused'); - 继续：
element.classList.remove('paused');（或添加'running'）
这种方式利于样式集中管理，也方便配合 transition 或其他状态做组合控制。
注意动画时间点的连续性
暂停/继续不会重置动画进度。例如动画执行到 1.2s 时暂停，再继续就会从 1.2s 处接着播放，保持原有节奏和关键帧位置。
但要注意：如果动画已结束（比如非无限循环的一次性动画），再设为 running 不会重新开始 —— 它已处于“完成态”。如需重播，得先重置动画，例如通过移除再添加 class、或用 void element.offsetHeight 强制重排后重新触发。
兼容性与多动画处理
animation-play-state 在现代浏览器中支持良好（Chrome 43+、Firefox 16+、Safari 9+、Edge 全支持）。若元素有多个动画（用逗号分隔），该属性也支持用逗号传多个值，例如：
element.style.animationPlayState = 'running, paused'; // 分别控制两个动画
未指定的则沿用默认值 running。建议显式写全，避免歧义。
