AnimationTimeline：duration 属性

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

Web 动画 API 的 AnimationTimeline 接口的 duration 只读属性返回此时间轴的最大值或 null。

请注意，派生接口 ViewTimeline 和 ScrollTimeline 总是返回 100% 的 duration，而 DocumentTimeline 没有 duration，并返回 null。

值

表示时间轴持续时间（此时间轴的最大值）的数字或 null。

示例

视图时间轴持续时间

ViewTimeline 始终以 CSSUnitValue 的形式返回 100% 的持续时间。

const subject = document.querySelector(".subject");
const timeline = new ViewTimeline({
  subject,
  axis: "block",
});

timeline.duration; // CSSUnitValue { value: 100, unit: "percent" }

滚动时间轴持续时间

ScrollTimeline 始终以 CSSUnitValue 的形式返回 100% 的持续时间。

const timeline = new ScrollTimeline({
  source: document.documentElement,
  axis: "block",
});

timeline.duration; // CSSUnitValue { value: 100, unit: "percent" }

文档时间轴持续时间

DocumentTimeline 没有持续时间。

document.timeline.duration; // null

规范

规范
Web 动画 Level 2 # dom-animationtimeline-duration

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年9月21日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题