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.

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.

js
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.

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

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

Document timeline duration

The DocumentTimeline has no duration.

js
document.timeline.duration; // null

Specifications

Specification
Web Animations Level 2
# dom-animationtimeline-duration

Browser compatibility

See also