怎么在HTML中通过Web Animation API的getComputedTiming获取动画的实际持续时间-html教程-PHP中文网

getcomputedtiming().duration 总是 infinity 或 0，因为它只读取动画声明的原始时长，未显式设置 duration 时默认为 infinity，已结束且无 fill 时退化为 0。

怎么在html中通过web animation api的getcomputedtiming获取动画的实际持续时间

getComputedTiming 返回的 `duration` 为什么总是 `Infinity` 或 `0`

直接调用 getComputedTiming() 获取动画实际持续时间，大概率得不到你想要的数值——它返回的 duration 字段不是“动画跑完花了多久”，而是“动画定义的时长”，且受动画状态影响极大。duration 来自动画效果（KeyframeEffect）的原始配置，若动画未显式设置 duration（比如用 CSS 声明、或 JS 中传了 {}），就可能为 Infinity；若动画已结束且没设 fill，也可能退化为 0。

真正反映“动画从开始到当前帧实际经过的时间”的字段是 activeDuration（活跃时长），但它仍不等于“实际运行耗时”——你需要结合 startTime 和当前时间手动计算。

getComputedTiming().duration：只读取声明值，和执行无关
getComputedTiming().activeDuration：等于 effect.getTiming().duration × 播放速率，但仍是预设值
真实流逝时间 = performance.now() - animation.startTime（需确保 startTime 已被设置）

animation.startTime 为空或 `null` 怎么办

刚创建的 Animation 实例，startTime 默认是 null。它只在动画**被添加到文档 timeline** 后才自动赋值（如调用 animation.play()），但这个时机不可控——浏览器可能延迟调度。

更可靠的做法是手动设置：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

用 animation.startTime = performance.now() 强制绑定起始时间（推荐在 play() 前）
或监听 onstart 回调，在回调里读取 startTime（注意：该事件仅触发一次，且可能错过首帧）
避免依赖 getComputedTiming().startTime——它只是对 animation.startTime 的镜像，不解决源头问题

示例：

const anim = element.animate(keyframes, { duration: 1000 });
anim.startTime = performance.now(); // 立即锁定起点
anim.play();
<p>// 后续任意时刻获取已运行毫秒数：
const elapsed = performance.now() - anim.startTime;
</p>

CSS 动画能否用 getComputedTiming 获取持续时间

不能直接用。CSS 动画（@keyframes + animation）生成的 Animation 实例，其 effect 是只读的，getComputedTiming() 虽可调用，但返回的 duration 值来自 CSS 的 animation-duration，且无法覆盖或修正。

若 CSS 中写的是 animation-duration: 2s，getComputedTiming().duration 就是 2000（毫秒）
若用了 animation-duration: inherit 或未声明，可能得 0 或 Infinity
想动态获取真实运行时长？只能靠 performance.now() 手动打点 + 监听 animationstart/animationend 事件