CSS Animations vs Javascript Animations

Basically let’s start with the main question and later we will see what they are individually. So,

What is animation?

Animation is known as a process or also we can call it a technique, through which it makes things look more appealing, lively and attractive. So basically, it is a method of manipulation by which we make the content actually move. Animations are very much needed in our web applications to make them look attractive which ultimately brings more viewers to an application. So in web applications, animations on HTML elements can be achieved either through CSS or Javascript. Thus, one can say that there are two types of animations. They are,

CSS Animations
Javascript Animations

So which one we are going to choose for a web application completely depends on the type of animation effects we are aiming to achieve and when we need that effect. So firstly, let us see what they are, individually.

CSS Animations

In a web application, animations on the HTML elements through CSS, can be achieved by CSS Transitions or CSS Animations.

CSS Transitions

CSS Transitions allow you change the property values of an element smoothly, over a given time duration. To create a transition effect, all we need to specify is about two things. One is the CSS property to which the effect is going to be added and other is the time duration of the effect cause if you don’t mention the time duration no transition will occur because default value taken is 0s. For example,

HTML Code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Hover over the below box, to see the transition effect:&lt;/p&gt;
&lt;div class="color-block"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<body>

<p>Hover over the below box, to see the transition effect:</p>

</body>

</html>

Corresponding CSS:

	.color-block {
	width: 100px;
	height: 100px;
	background: blue;
	transition: transform 2s;
	&amp;:hover {
  		transform: rotate(90deg);
	}
}

.color-block {

width: 100px;

height: 100px;

background: blue;

transition: transform 2s;

&:hover {

transform: rotate(90deg);

}

So in the above example we would be getting an output like, there will be a blue color box of width and height of 100 pixels each which will keep rotating by 90 degrees in a duration of 2 seconds whenever it is being hovered.
View the same here: https://codepen.io/Tejveer18/pen/LYVoNor

Similarily, we can also change multiple property values at a time. For example,

HTML Code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Hover over the below box, to see the transition effect:&lt;/p&gt;
&lt;div class="color-block"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<body>

<p>Hover over the below box, to see the transition effect:</p>

</body>

</html>

Corresponding CSS:

.color-block {
	width: 100px;
	height: 100px;
	background: red;
	transition: width 2s, height 4s;
	&amp;:hover {
  		width: 300px;
		height: 600px;
	}
}

.color-block {

width: 100px;

height: 100px;

background: red;

transition: width 2s, height 4s;

&:hover {

width: 300px;

height: 600px;

}

Thus, in this example we would be getting an output like, there will be red box of width and height 100 pixels each initially, and when hovered the the width would increase to 300 pixels in a duration of 2 seconds and the height would increase to 600 pixels in a duration of 4 seconds.
View the same here: https://codepen.io/Tejveer18/pen/eYNazOR

This is how transition works which is also a kind of animation to a HTML element. These are the list of all the CSS transition properties we can use.

Property	Description
transition	It is a shorthand property for setting the transition properties into a single property.
transition-delay	It specifies a delay (in seconds) for the transition effect
transition-duration	It specifies how many seconds or milliseconds a transition effect takes to complete
transition-property	It specifies the name of the CSS property the transition effect is for
transition-timing-function	It specifies the speed curve of the transition effect

The CSS transition properties for a specific HTML element having a class name as “class-name” can be specified one after the other this way:

.class-name {
	transition-property: height;
	transition-duration: 5s;
	transition-timing-function: linear;
	transition-delay: 2s;
}

.class-name {

transition-property: height;

transition-duration: 5s;

transition-timing-function: linear;

transition-delay: 2s;

}

or by using the shorthand property transition, like this:

.class-name {
	transition: height 5s linear 2s;
}

.class-name {

transition: height 5s linear 2s;

}

CSS Animations

A CSS animation lets an element gradually change from one style to another by changing the element properties. We can change those properties as many times as we want. To use CSS animation, we must first specify some keyframes for the animation. First of all let us understand what keyframes are.

@keyframes Rule

Keyframes hold what styles the element will have at certain times. We mention all the styles within the @keyframes rule, i.e., within the keyframes we can mention at what point of time of an animation what all styles (element properties) the element should have. Also for an animation to work, we must bind it to an element. Don’t worry we will go through an example to understand this clearly.

HTML Code:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div class="color-block"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<body>

</body>

</html>

Corresponding CSS:

@keyframes change-color {
	0% {
		background-color: red; 
		width: 100px;
  		height: 100px;
	}
	25% {
		background-color: blue; 
		width: 150px;
  		height: 150px;
	}
	50% {
		background-color: green; 
		width: 100px;
  		height: 100px;
	}	
	75% {
		background-color: yellow; 
		width: 150px;
  		height: 150px;
	}
}

.color-block {
	width: 100px;
	height: 100px;
	background-color: red;
	animation-name: change-color;
	animation-duration: 4s;	
}

@keyframes change-color {

0% {

background-color: red;

width: 100px;

height: 100px;

}

25% {

background-color: blue;

width: 150px;

height: 150px;

}

50% {

background-color: green;

width: 100px;

height: 100px;

}

75% {

background-color: yellow;

width: 150px;

height: 150px;

}

.color-block {

width: 100px;

height: 100px;

background-color: red;

animation-name: change-color;

animation-duration: 4s;

}

So, in this example we would be getting an output like, initially there would be red box with width and height 100 pixels each and on completion on 25% of animation i.e., after 1 second, the size of the box gradually increases to 150 pixels (both width and height) and it’s color changes to blue. Again on completion of 50% of the animation, i.e., after 2 seconds, the size of the box gradually decreases to 100 pixels (again both width and height) and it’s color changes to green. Now after 3 seconds, i.e, after completion of 75% of the animation, the size of the box gradually increases to again 150 pixels and it’s color changes to yellow. After 4 seconds, i.e, after the completion of animation-duration, the box regains it’s intial styles.
View the same here: https://codepen.io/Tejveer18/pen/mdJYEyg

Similar to transition-duration, iproperty is not specified, no animation will occur, because the default value is 0s. And basically, when the animation is completed the element returns to it’s inital styles, unless and until we mention the animation-iteration-count property as infinite.

The list of all the CSS animation properties along with the @keyframes rule, are mentioned in the below table:

Property	Description
@keyframes	It specifies the animation code
animation	It is a shorthand property for setting all the animation properties
animation-name	It specifies the name of the @keyframes animation
animation-duration	It specifies how long time an animation should take to complete one cycle
animation-direction	It specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-iteration-count	It specifies the number of times an animation should be played
animation-delay	It specifies a delay for the start of an animation
animation-fill-mode	It specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-play-state	It specifies whether the animation is running or paused
animation-timing-function	It specifies the speed curve of the animation

The CSS animtation properties for a specific HTML element having a class name as “class-name” can be specified one after the other this way:

.class-name {
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 10;
    animation-direction: alternate;
}

.class-name {

animation-name: example;

animation-duration: 4s;

animation-timing-function: linear;

animation-delay: 1s;

animation-iteration-count: 10;

animation-direction: alternate;

}

or by using the shorthand animation property, like this:

.class-name {
	animation: example 4s linear 1s 10 alternate;
}

.class-name {

animation: example 4s linear 1s 10 alternate;

}

For more deep understanding of the properties and their examples, view this: https://www.w3schools.com/css/css3_animations.asp

Now that we have seen what basic CSS animations are let’s dive into Javascript animations.

Javascript Animations

Javascript animations are basically those through which we can achieve, what we couldn’t with just CSS animations. JavaScript animations are for advanced effects like boune, stop, pause, rewind, or slow-down. These advanced effects are based on the idea that we can animate by moving DOM elements around the page according to a pattern determined by a logical equation or function, which is not possible with CSS animations.

For instance, changing style.left from 0px to 100px moves the element, but not smoothly. So if we increase it in setInterval changing by 1px with a small delay, like 40 times per second, then it will look smooth.
The pseudo-code can look like this:

let timer = setInterval(() =&gt; {
	if (animation complete) clearInterval(timer);
	else increase style.left by 1px
}, 25);

let timer = setInterval(() => {

if (animation complete) clearInterval(timer);

else increase style.left by 1px

}, 25);

Now let’s take a look at an example, like how this idea can be more useful. Imagine there’s an image and it moves when we click a button and stops when we click an another button. This cannot be achieved by just CSS Animations, hence we use Javascript here. So here goes the code,

HTML Code:

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
	&lt;head&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;button class="button" id="move"&gt;Move&lt;/button&gt;
		&lt;button class="button" id="stop"&gt;Stop&lt;/button&gt;
		&lt;img id="train" class="train" src="https://js.cx/clipart/train.gif"&gt;
	&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</body>

</html>

Corresponding CSS:

.train {
     position: relative;
 }
.button {
     border-radius: 5px;
     border: none;
     background: black;
     color: white;
     padding: 5px;
     outline: none;
     cursor: pointer;
}

.train {

position: relative;

}

.button {

border-radius: 5px;

border: none;

background: black;

color: white;

padding: 5px;

outline: none;

cursor: pointer;

}

Corresponding Javascript:

let train = document.getElementById('train');
let moveButton = document.getElementById('move');
let stopButton = document.getElementById('stop');

moveButton.addEventListener('click', () =&gt; {
  let start = Date.now();
  let timer = setInterval(() =&gt; {
    let timePassed = Date.now() - start;
    train.style.left = timePassed / 10 + 'px';
    stopButton.addEventListener('click', () =&gt; {
      clearInterval(timer);  
    })
	}, 10);
})

let train = document.getElementById('train');

let moveButton = document.getElementById('move');

let stopButton = document.getElementById('stop');

moveButton.addEventListener('click', () => {

let start = Date.now();

let timer = setInterval(() => {

let timePassed = Date.now() - start;

train.style.left = timePassed / 10 + 'px';

stopButton.addEventListener('click', () => {

clearInterval(timer);

})

}, 10);

})

A quick demo of the above basic example, please view this: https://codepen.io/Tejveer18/pen/abOrmLo

For few more timing functions and examples you can view this: https://javascript.info/js-animation#timing-functions. This will give you a brief idea on how well you can use javascript animations.
For more complex animations, like when several animations are running simultaneously, to maintain them we use an inbuilt function requestAnimationFrame. For more idea on this, view: https://javascript.info/js-animation#using-requestanimationframe

There are also a lot of frameworks that can be used to handle Javascript animations. Few of them are jQuery, Velocity, WebGL, GreenSock etc.

Conclusion

So basically we use both CSS animations and Javascript animations in our daily web applications and as earlier said, which one we are going to choose for a web application completely depends on the effects we are aiming to achieve and what time we need that effect.

Use CSS animations for simpler transitions, like one-shot transitions. For example, we can say like toggling UI element states.
Use JavaScript animations when you want to have advanced effects like bounce, stop, pause, rewind, slow-down or if you need a control of when and what to animate.
Use a modern framework that you’re comfortable with, for animating with Javascript more.

So hereby I conclude saying that, in any web application to make it a treat to the eyes of a viewer, animation is a must. Thus, it is not CSS animations versus Javascript animations, but CSS animations and Javascript animations.