{{ SeeCompatTable() }} {{ APIRef("Web Animations API") }}
Document timelines, including the default document timeline, {{domxref("Document.timeline")}}
, are represented in the Web Animations API by the DocumentTimeline
interface.
Constructor
- {{domxref("DocumentTimeline.DocumentTimeline()")}}
- Creates a new
DocumentTimeline
object associated with the active document of the current browsing context.
Attributes
DocumentTimeline.currentTime
- Returns the time value in milliseconds for this timeline or
null
if this timeline is inactive. (Inherited from{{domxref("AnimationTimeline")}}
.)
Examples
We could share a single documentTimeline
among multiple animations, thus allowing us to manipulate just that group of animations via their shared timeline. This bit of code would start all the cats animating 500 milliseconds into their animations:
var cats = document.querySelectorAll('.sharedTimelineCat'); cats = Array.prototype.slice.call(cats); var sharedTimeline = new DocumentTimeline(500); cats.forEach(function(cat) { var catKeyframes = new KeyframeEffect(cat, keyframes, timing); var catAnimation = new Animation(catKeyframes, sharedTimeline); catAnimation.play(); });
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Web Animations', '#the-documenttimeline-interface', 'DocumentTimeline' )}} | {{Spec2('Web Animations')}} | Editor's draft. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{ CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
See also
- Web Animations API
- {{domxref("AnimationTimeline")}}
- {{domxref("AnimationTimeline.currentTime")}}
- {{domxref("Document.timeline")}}
- {{domxref("DocumentTimeline.DocumentTimeline()")}}