css动画暂停后如何继续_修改animation play state属性

可通过 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。建议显式写全，避免歧义。