AnimationTimeline: duration property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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" }