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 Element
interface's animate()
method is a shortcut method which creates a new Animation
, applies it to the element, then plays the animation. It returns the created Animation
object instance.
Elements can have multiple animations applied to them. You can get a list of the animations that affect an element by calling Element.getAnimations()
.
var animation = element.animate(keyframes, options);
keyframes
options
id Optional
animate()
: a DOMString
with which to reference the animation.delay
Optional
direction
Optional
normal
), backwards (reverse
), switches direction after each iteration (alternate
), or runs backwards and switches direction after each iteration (alternate-reverse
). Defaults to "normal"
.duration
Optional
easing
Optional
"linear"
, "ease"
, "ease-in"
, "ease-out"
, and "ease-in-out"
, or a custom "cubic-bezier"
value like "cubic-bezier(0.42, 0, 0.58, 1)"
. Defaults to "linear"
.endDelay
Optional
fill
Optional
"backwards"
), retained after the animation has completed playing ("forwards"
), or both
. Defaults to "none"
.iterationStart
Optional
iterations
Optional
1
, and can also take a value of Infinity
to make it repeat for as long as the element exists.The following options are currently not shipped anywhere, but will be added in the near future.
composite Optional
replace
. add
dictates an additive effect, where each successive iteration builds on the last. For instance with transform
, a translateX(-200px)
would not override an earlier rotate(20deg)
value but result in translateX(-200px) rotate(20deg)
.accumulate
is similar but a little smarter: blur(2)
and blur(5)
become blur(7)
, not blur(2) blur(5)
.replace
overwrites the previous value with the new one. iterationComposite Optional
accumulate
or replace
(see above). Defaults to replace
.spacing Optional
distribute
. distribute
positions keyframes so that the difference between subsequent keyframe offsets are equal, that is to say, without any offsets, it will equally distribute the keyframes across play time.paced
positions keyframes so that the distance between subsequent values of a specified paced property are equal, that is to say, keyframes are spaced further apart the greater the difference in their property values.
Returns an Animation
.
In the demo Down the Rabbit Hole (with the Web Animation API), we use the convenient animate()
method to immediately create and play an animation on the #tunnel
element to make it flow upwards, infinitely. Notice the array of objects passed as keyframes and also the timing options block.
document.getElementById("tunnel").animate([ // keyframes { transform: 'translateY(0px)' }, { transform: 'translateY(-300px)' } ], { // timing options duration: 1000, iterations: Infinity });
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'animate()' in that specification. | Working Draft | Initial definition |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 36 | ? | 48.0 (48.0) | ? | 23 | ? |
id option | 50.0 | ? | 48.0 (48.0) | ? | 37 | ? |
composite , iterationComposite , and spacing options | No support | No support | No support | No support | No support | No support |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | ? | 39.0 | 39.0 | 48.0 (48.0) | ? | ? | ? | ? |
id option | No support | 50.0 | 50.0 | 48.0 (48.0) | ? | ? | ? | ? |
composite , iterationComposite , and spacing options | No support | No support | No support | No support | No support | No support | No support | No support |
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/element/animate