Animation: timeline property

{{ APIRef("Web Animations") }}

The Animation.timeline property of the {{domxref("Animation")}} interface returns or sets the {{domxref("AnimationTimeline", "timeline")}} associated with this animation. A timeline is a source of time values for synchronization purposes, and is an {{domxref("AnimationTimeline")}}-based object. By default, the animation's timeline and the {{domxref("Document")}}'s timeline are the same.

Value

A {{domxref("AnimationTimeline", "timeline object", "", 1)}} to use as the timing source for the animation, or null to use the default, which is the {{domxref("Document")}}'s timeline.

Examples

Here we set the animation's timeline to be the same as the document's timeline (this is the default timeline for all animations, by the way):

animation.timeline = document.timeline;

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• Web Animations API
• {{domxref("Animation")}}
• {{domxref("AnimationTimeline")}} the parent object all timelines inherit from.
• {{domxref("DocumentTimeline")}} the only kind of timeline object available at this time.
• {{domxref("Document.timeline")}} is the default timeline all animations are assigned.