JavaScript animate function | animations in javascript

animations
animate
keyframes
options
Events

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
duration	milliseconds
delay	milliseconds
fill	"none" ( default ), "backward", "forward", "both"
iterations	number or Infinity
direction	normal, reverse, alternate, alternate-reverse
easing	linear (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
finish	after animation finished
remove	remove 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"});