This article needs a technical review. How you can help.
This article needs an editorial review. How you can help.
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The Animation()
constructor of the Web Animations API returns a new Animation
object instance.
Syntax
var animation = new Animation(effect, timeline);
Parameters
- effect
Optional
- The target
KeyframeEffect
to assign to the animation. (In the future, other kinds ofEffects
likeSequenceEffects
orGroupEffects
may be possible, but for now, the only kind ofEffect
is aKeyframeEffect
.) - timeline
Optional
- Specifies the
timeline
with which to associate the animation. (Currently the only timeline type available is aDocumentTimeline
, but in the future there my be timelines associated with gestures, scrolling.)
Examples
In the Follow the White Rabbit example, the Animation
constructor is used to create an Animation
for the rabbitDownKeyframes
using the document's timeline
:
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'animation()' in that specification. |
Working Draft | Editor's draft. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? | ? | ? |