AnimationTimeline: duration property

Baseline 2026

Newly available

Since October 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

See full compatibility
Learn more

The duration read-only property of the Web Animations API's AnimationTimeline interface returns the maximum value for this timeline or null.

Note that the derived interfaces ViewTimeline and ScrollTimeline always return a duration of 100%, while DocumentTimeline has no duration, and returns null.

Value

A number representing the timeline's duration (the maximum value for this timeline) or null.

Examples

View timeline duration

The ViewTimeline always returns a duration of 100% as a CSSUnitValue.

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

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

Scroll timeline duration

The ScrollTimeline always returns a duration of 100% as a CSSUnitValue.

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

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