getanimations()返回当前元素所有运行或暂停未结束的css/web animations动画实例，前提是动画已真实启动；常见为空原因包括元素未渲染、animation-name错误或调用过早，需用requestanimationframe延迟获取并按animationname过滤。
getAnimations() 能拿到正在播、已暂停但没 cancel 的 CSS 动画实例，但前提是动画真正在 DOM 中“活”着——不是写了 animation 就算数，得过渲染帧那一关。
为什么 getAnimations() 返回空数组
最常见原因不是 API 失效，而是动画根本没启动：
-
display: none、visibility: hidden或元素还没appendChild到文档里 -
@keyframes名字拼错，或animation-name实际是none - 刚给元素加完
style.animation就立刻调用 —— 浏览器还没走完样式计算和布局，getAnimations()看不到它。加一层requestAnimationFrame再查更稳 - 用了
animation-play-state: paused但没调过play()，此时动画状态是idle，getAnimations()仍会返回（只要没被cancel()或自然结束）
如何安全获取并过滤目标 CSS 动画
getAnimations() 返回的是所有动画实例的数组，包括 CSSAnimation 和 Animation 类型，不能默认取 [0] —— 同一个元素可能同时跑 transform + opacity 两个动画。
- 用
anim.animationName匹配@keyframes名（注意大小写敏感） - 检查
anim.effect?.getTarget()是否等于当前元素，排除伪元素或子元素动画干扰 - 如果动画由 Web Animations API 创建（比如
el.animate()），animationName是空字符串，得靠anim.id或自定义属性区分 - 示例过滤逻辑：
const animations = el.getAnimations();<br>const targetAnim = animations.find(a => a instanceof CSSAnimation && a.animationName === 'spin');
兼容性差怎么办？别只写 if (!el.getAnimations)
Safari 16.4+、Chrome 115+、Firefox 73+、Edge 79+ 支持；iOS 15.6 及更早的 Safari、IE 完全不支持。降级不能只判空就 return。
- 对非关键路径：用
el.classList.add('paused')配合 CSS 中.paused { animation-play-state: paused; }控制开关 - 对关键交互（比如点击加速旋转）：监听
animationstart事件 + 维护isAnimating = true状态变量，失败时直接禁用 JS 控制，退回到纯 CSS 行为 - 避免 fallback 后出现“半残”体验，比如 JS 想读当前时间点但降级方案根本不提供该能力
真正容易被忽略的是多动画共存与 playbackRate 的副作用
同一个元素上多个 @keyframes 分开定义（比如 rotate 和 fade），getAnimations() 全部返回，不是只返回“主动画”。而修改 playbackRate 会影响整个实例：
- 设
anim.playbackRate = -2不是“倒放两倍速”，而是把速率翻倍再反向 —— 若之前是2，reverse() 后变成-2，不是-1 - 对
infinite动画调finish()没用，它永远不会触发onfinish - 改
currentTime必须先pause()，否则浏览器可能忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
