JavaScript Animate function is used to add animations to to DOM Elements. Its is a client-side API to create animations using javascript. animate functions can add animation to elements like fade-in, fade-out, show and hide, slide up, slide down (like jQuery animations) etc.

Earlier jQuery was used to add animations to webpage. But now JavaScript support build-in API for animations support in major browsers.


const elem=document.querySelector('h1');
elem.animate( keyframes, options );

Animate()

Javascript animate() method is used to add animations to DOM Elements in javascript. animate function can add animations to css properties with numeric values, like width, height, opacity, left, top etc. It is not applicable to string values like display, font-family etc.

animate() function has two parameters, first an array of keyframes objects or an keyframe object with properties in array. second is timer in milliseconds or options. Both of the arguments are compulsory.

keyframes

The first parameter of animate method is keyframes. keyframes are written using array or object. For keyframe array, the elements are objects with properties and values. For key keyframes object, the property has values in array. options are also required in animations, but we can also use time in milliseconds in option.

animate with keyframe array

Animation

const elem=document.querySelector('span');
elem.animate([{opacity:0},{opacity:1}],1000);
Blink

const elem=document.querySelector('span');
elem.animate([{opacity:1},{opacity:0},{opacity:1}],1000);

animate with keyframe object

Animation

const elem=document.querySelector('span');
elem.animate({opacity:[0,1]},1000);
Rotate

const elem=document.querySelector('span');
elem.animate({transform:['rotate(0deg)','rotate(360deg)']},1000);

options

options are either timing in milliseconds or object containing multiple properties like duration, easing etc. options are also compulsory like keyframes. Without options, animation duration will be considered zero.

options values

option values
property values
durationmilliseconds
delaymilliseconds
fill"none" ( default ), "backward", "forward", "both"
iterationsnumber or Infinity
directionnormal, reverse, alternate, alternate-reverse
easinglinear (default), ease, ease-in, ease-out, ease-in-out, cubic-bezier()

option with duration

Example

const elem=document.querySelector('span');
elem.animate({transform:['scale(1)','scale(0)','scale(1)']},2000);

option with object

Example

const elem=document.querySelector('span');
elem.animate(
     {transform:['translateX(0)','translateX(100%)','translateX(0)']},
     {duration:1000, iterations:2}
     );

option with easing

Example

const elem=document.querySelector('span');
elem.animate(
     {transform:['scale(1)','scale(0)','scale(1)']},
     {duration:1000, iterations:Infinity, easing:'ease-in-out'}
     );

Events

Events can be added after animation is over using Event Listener Method. Supported events are "cancel", "finish" and "remove".

events in animate function

Events in animate function
Events application
cancel cancel animation
finishafter animation finished
removeremove animation

Without finish event

This div will not hide after animation


const elem=document.querySelector('div');
elem.animate({opacity:[1,0]},{duration:1000,fill:"forwards"});

With finish event

This div will hide after animation


const elem=document.querySelector('div');
elem.animate({opacity:[1,0]},{duration:1000,fill:"forwards"}).addEventListener("finish",function(){elem.style.display="none"});