Element.animate()

Animation in pure JS.

The animate() method of the Element interface is a quick way to create an animation that is immediately applied to the element and plays the animation. The method returns a created instance of the Animation class.

Elements can have several attached animations. You can get a list of animations that affect the element by calling Element.getAnimations().

Returns

Returns Animation.

Syntax

const animation = element.animate( keyframes, options );

keyframes(array/object) (required)

An array of keyframeObjects, or a keyframeObject whose properties are arrays of values for iteration. See Keyframe Formats.

options(object/number) (required)

An integer - the duration of the animation (in milliseconds), or an object containing animation options.

id
A unique property for animate(): DOMString, which can be used to refer to the animation. More info.
direction
Specifies the direction of the animation. It can be:
- normal - forward
- reverse - backward
- alternate - switch direction after each iteration
- alternate-reverse - work backward and switch after each iteration.
Default: "normal"
duration
Number of milliseconds for each animation iteration. Although this property is technically optional, keep in mind that your animation will not start if this value is 0.
Default: 0
easing(string)
The speed of the animation's change over time. Accepts:
```
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1)
steps(4, end)
```
Default: "linear"
delay
Number of milliseconds to delay the start of the animation.
Default: 0
endDelay(int)
Number of milliseconds to delay after the animation finishes. This is primarily useful for when the sequence of animation actions is based on the completion of another animation.
Default: 0
fill(string)
Dictates whether animation effects are reflected on the element itself:
- backwards - before playing
- forwards - persist after the animation is finished
- both - or both.
- none - do not reflect style changes on the element.
Default: "none"
iterationStart(float)
Describes when the animation's iteration should start. For example, a value of 0.5 indicates the beginning of the animation at the middle of the first iteration; with this set of values, the 2-iteration animation will be finished halfway to the third iteration.
Default: 0.0
iterations
Number of times the animation should repeat. Can take the value Infinity to repeat the animation as long as the element exists.
Default: 1

Properties of the Animation object

currentTime

The current time value of the animation in milliseconds, whether the animation is running or paused. If the animation has no timeline, is inactive, or has not yet played, this value is zero.

effect

Returns and sets the AnimationEffectReadOnly associated with this animation. This is usually a KeyframeEffect object.

finished(readonly)

Returns a promise indicating the end of the animation.

id

Returns and sets the String used to identify the animation.

playState(readonly)

The play state of the animation.

idle - The current time of the animation is unresolved and there are no pending tasks.
running - The animation is running.
paused - The animation was suspended and the Animation.currentTime property is not updating.
finished - The animation has reached one of its boundaries and the Animation.currentTime property is not updating.

playbackRate(float)

Returns or sets the playback rate of the animation. A negative number means the animation is playing in reverse.

0 - pauses the animation.
1 - the animation forwards.
-1 - the animation goes backwards.
2 - doubles the speed of the animation.
-1.5 - slows down the animation by 1.5 times.

// forwards
Animation.playbackRate = 1;
Animation.play();

// backwards
Animation.playbackRate = -1;
Animation.play();

https://codepen.io/rachelnabors/pen/PNYGZQ
https://codepen.io/rachelnabors/pen/PNGGaV

ready(readonly)

Returns a promise indicating the start of the animation.

startTime

Returns and sets the start of the animation.

timeline

Returns or sets the timeline associated with this animation.

Events

oncancel: Returns and sets the event handler for the cancel event.
onfinish: Returns and sets the event handler for the finish event.

Methods

cancel(): Clears all keyframeEffects called by this animation and stops its execution.
commitStyles(): Records the final state of animation styles, even after this animation has been removed. This results in the final state of styles being recorded on the animating element as properties inside a style attribute.
finish(): Finds the end of the animation, depending on whether the animation is playing or inverted.
pause(): Pauses a running animation.
persist(): Explicitly persist the animation, when it otherwise would have been removed due to the browser's behavior implying automatic removal of fill animations.
play(): Starts or continues the animation, or starts the animation again if it has previously finished.
reverse(): Changes the playback direction, stopping at the beginning of the animation. If the animation is finished or not running, it will play from the end to the beginning.
updatePlaybackRate(): Sets the animation speed after synchronizing its playback position.

Examples

#1 How it Works

The following code:

var animation = elem.animate({ opacity: 0 }, 2000);

is approximately the same as:

var effect = new KeyframeEffect( elem, { opacity: 0 }, 2000 );
var animation = new Animation( effect, elem.ownerDocument.timeline );
animation.play();

#1 Examples

https://web-animations.github.io/web-animations-demos/

Examples (Alice)

Demonstration: Down the Rabbit Hole (with Web Animations API)

Demonstration: Growing/Shrinking Alice Game : Alice in Web Animations API Land

Demonstration: Red Queen's Race (with Web Animations API)

#1 Example

const elem = document.getElementById("tunnel")

elem.animate(
	[
		{ transform: 'translate3D( 0, 0, 0 )' },
		{ transform: 'translate3D( 0, -300px, 0 )' }
	],
	{
		duration: 1000,
		iterations: Infinity
	}
)

let player = elem.animate(
	{ height: [ `100px`, `200px` ] },
	{ duration: 1000, fill: 'forwards' }
)

player.onfinish = ev => { /* do something */ }
// or
player.addEventListener( 'finish', ev => { /* do something */ } )

// fadeIn
elem.animate( { opacity: [ 0, 1 ], }, { duration: 200 } )