如何利用HTML的CSS animation-play-state控制动画的暂停与继续播放-html教程-PHP中文网

animation-play-state仅控制@keyframes定义的css动画，对transition、canvas、requestanimationframe或three.js动画无效；须满足已声明匹配的@keyframes、生效的animation属性且时长非零、动画正活跃运行三个条件才起作用。

如何利用html的css animation-play-state控制动画的暂停与继续播放

animation-play-state 只对纯 CSS @keyframes 动画有效，不能控制 transition、Canvas、requestAnimationFrame 或 Three.js 动画。设了也白设，别浪费时间试。

怎么确认动画真的能被 `animation-play-state` 控制

先看元素是否满足三个硬条件：

已声明 @keyframes，且拼写与 animation-name 完全一致（大小写敏感）
元素上有生效的 animation 属性（比如 animation: spin 2s infinite;），时长不能为 0s
动画正处于「活跃播放中」——不是刚插入 DOM 还没触发，也不是已自然结束且 animation-fill-mode: forwards 锁定了终态

最靠谱的验证方式是：console.log(getComputedStyle(el).animationPlayState)。如果返回 "running" 或 "paused"，说明它“活”着；如果返回 "initial" 或空字符串，大概率动画根本没跑起来。

用 JavaScript 直接改 `style.animationPlayState` 最稳

内联样式优先级最高，不依赖 class 层叠，也不怕被其它规则覆盖：

暂停：el.style.animationPlayState = 'paused';
恢复：el.style.animationPlayState = 'running';（不能留空或设成 ''，否则回退到 CSS 规则值）
读取当前状态：getComputedStyle(el).animationPlayState === 'paused'
多个动画并存时，animation-play-state 支持逗号分隔，顺序必须和 animation 值严格对应，例如：animation: fade 1s, slide 2s infinite; → animation-play-state: paused, running;

注意：el.style.animation-play-state 是错的写法，JS 中必须用驼峰命名 animationPlayState，否则报语法错误。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

用 class 切换更适合批量控制和维护

适合轮播图、加载指示器等需统一管理多个元素的场景：

CSS 中定义：.is-paused { animation-play-state: paused !important; }（!important 是合理且必要的，用来压制动画规则里的默认值）
JS 中切换：el.classList.toggle('is-paused')
避免把暂停逻辑写进事件回调里反复调用，比如不要在 requestAnimationFrame 循环里每帧都设一次 animationPlayState，可能引发抖动

如果元素动画靠添加 class 才触发（比如 .animate { animation: bounce 1s; }），那得确保 .animate 和 .is-paused 同时存在，且后者优先级足够高。

为什么点了暂停但动画还在动

常见卡点不在语法，而在状态误判：

动画还没开始：比如靠 setTimeout 延迟 100ms 后执行 pause，但实际动画 50ms 就结束了，或者压根没触发
用了 transition 却当成 animation 处理——animation-play-state 对 transition 完全无效
CSS 层叠中，更高优先级的选择器把 animation-play-state 又设回 running，用浏览器开发者工具检查「Computed」面板里的最终值
Three.js / Canvas 动画混用了 CSS 类名，结果只停了无关的装饰动画，主逻辑照常跑