CSS动画暂停后如何继续？修改animation-play-state属性

CSS动画的暂停与继续只需通过`animation-play-state`属性轻松实现——设为`paused`即可即时暂停，设为`running`便能无缝续播，全程保持动画进度、节奏和关键帧位置不变；既支持JavaScript直接操作内联样式的便捷写法（`element.style.animationPlayState`），也推荐通过预定义CSS类名（如`.paused`/`.running`）切换来提升可维护性；它完美兼容现代浏览器，还能精准控制多个动画的独立状态，是实现交互式动画体验不可或缺的核心技巧。

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

今天关于《CSS动画暂停后如何继续？修改animation-play-state属性》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！