Introduction

If you are just getting started with web development or a professional you might have come across animations, everyone favorite, you have used CSS transitions and javascript's web animation API but you might be thinking why we have 2 options to animate an element in HTML. In this post let's find out.

TL;DR

1. Use CSS animation for simple one-shot animations, on which you do not want additional controls on the animation.
2. Use web animation API or javascript for animation when you want full control over your animation like play, pause, reverse, slow down, etc.
   

Using CSS Animation

In CSS we can animate nearly everything we want, we also have options of easing, delay, etc. but we cannot stop an animation without the help of javascript or rewind or pause it. So animation or transition in CSS can be used for animation which is simple one-shot animation like animating the toggling of the opacity or changing the style of an element depending on its state.
In the real world, if you are a web developer who is not going crazy with animation of different elements at the same time or where you don't worry about frame rates then CSS animation or transitions is the way to go. because CSS is not naive and it can automatically manage all of those things behind the scene so you don't have to worry about it.
for example, if you have a transition like this you should use CSS transition there is no need to use javascript, here we have a simple "one-shot" transition in which we are changing the position of an element depending on its state and we don't want any delay or control over the animation.

Using javascript animation

In javascript, we can do anything we can in CSS but in addition to that we can have more control over animation, over frame rate, over when the animation should play, over performance in general, but with the advancement of CSS you would rarely need javascript for animation until you are animating the whole scene, or using WebGL or WebGPU, or 3d objects where performance and more complex animation is needed which could be impossible to create with CSS, in addition to all of these things we need javascript for state management so if you are creating animations in CSS there is a high chance that you will be using javascript for changing the class or managing the state. for example, if you have complex animations in which we are animating multiple elements on single event so it is not possible in CSS so we should use javascript web animation API for these kind of animations

Conclusion:

So in this post, we see in which situation we should use javascript for animation and in which situation we should use CSS. If you like this post leave a like. See you in the next post