Element.animate()
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.
Note: Elements can have multiple animations applied to them. You can get a list of the
animations that affect an element by calling Element.getAnimations()
.
Syntax
animate(keyframes, options)
Parameters
keyframes
-
Either an array of keyframe objects, or a keyframe object whose properties are arrays of values to iterate over. See Keyframe Formats for more details.
options
-
Either an integer representing the animation's duration (in milliseconds), or an Object containing one or more timing properties described in the
KeyframeEffect()
options parameter and/or the following options:id Optional
-
A property unique to
animate()
: aDOMString
with which to reference the animation.
Return value
Returns an Animation
.
Examples
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
});
Implicit to/from keyframes
In newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. For example, consider this simple animation — the Keyframe object looks like so:
let rotate360 = [
{ transform: 'rotate(360deg)' }
];
We have only specified the end state of the animation, and the beginning state is implied.
Specifications
Specification |
---|
Web Animations # dom-animatable-animate |
Browser compatibility
BCD tables only load in the browser