要获取所有带有动画效果的节点，应优先使用 document.getAnimations() 筛选 playState 为 'running' 的动画，并提取其 effect.target，去重后过滤非 Element 类型；静态扫描仅能识别动画定义，无法确认是否正在播放。

要获取所有带有动画效果的节点，核心思路是检查元素是否正在运行 CSS 动画或过渡（transition），因为 JavaScript 本身不“标记”哪些元素有动画，而是通过浏览器渲染引擎的状态来判断。

检查 getComputedStyle 中的动画属性

最常用且可靠的方式是读取元素的 animation-name 和 transition-property，再结合当前实际播放状态：

• animation-name 不为 none，且 animation-play-state 为 running，说明该元素正在播放 CSS 动画；
• transition-property 不为 none，且对应属性（如 transform、opacity）的 getComputedStyle 值在最近发生了变化（需配合 transitionrun/transitionstart 事件或 MutationObserver 观察），但仅靠样式值无法 100% 判断“当前是否正在过渡中”——更稳妥的是监听 transitionrun 事件并维护一个活跃列表。

用 document.getAnimations() 获取全部活跃动画

现代浏览器（Chrome 43+、Firefox 48+、Edge 79+、Safari 16.4+）支持 document.getAnimations()，它返回所有当前正在运行的 CSS 动画和 Web Animations API 创建的动画实例：

• 每个动画对象的 effect.target 就是绑定的 DOM 节点；
• 过滤掉已暂停、已结束或未启动的动画（检查 playState === 'running'）；
• 去重：同一个元素可能有多个动画，用 Set 避免重复添加。

示例代码：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

立即学习“Java免费学习笔记（深入）”；

const runningAnimations = document.getAnimations()
  .filter(anim => anim.playState === 'running');
const animatedElements = [...new Set(
  runningAnimations.map(anim => anim.effect?.target)
)].filter(el => el instanceof Element);

注意边界情况

以下情况容易被误判或漏判：

• CSS 动画设置了 animation-delay 但尚未开始 → playState 是 pending，不属于 running；
• 过渡（transition）触发后立刻结束（如 0.01s）→ 很难捕获，建议结合 transitionrun 和 transitionend 事件动态追踪；
• 使用 requestAnimationFrame 或 JS 手动更新样式实现的“动画”→ 不会被 getAnimations() 捕获，需业务层自行标记（例如加 data-js-animated）；
• 伪元素（::before/::after）上的动画 → getAnimations() 会返回，但 effect.target 是其宿主元素，不是伪元素本身（伪元素无 DOM 节点）。

轻量兼容方案（不依赖 getAnimations）

如果需支持较老浏览器（如 IE 或旧版 Safari），可退化为静态扫描：

• 遍历目标范围内元素（如 document.querySelectorAll('*')）；
• 对每个元素调用 getComputedStyle(el)，检查：
    – animationName !== 'none'
    – transitionProperty !== 'none'；
• 注意：这只是“有动画定义”，不等于“正在播放”。如需运行时判定，必须配合事件监听或轮询（不推荐）。