Thread by @Prathkum

CSS Animation and CSS Transition are two different modules of CSS but many of us get confused that when to use which one?

Let's try to explore more about them 🧵 👇🏻

Though there are some similarities in animation and transition but first let's try to find out the real difference

Transition is something that needs to be triggered. For example, changing the height when the user hover the element

On the other side, animations do not need to be triggered.

Consider this, When I hover over the box, the height changes.

Here hover is the trigger

Watch the above video again, We can say that transition is a two-point operation that takes place between point A and point B

In the above example,

Point A - Initial point - 100px height
Point B - Final point - 200px height

On the other hand, the animation is defined by a keyframe at-rule which varies from one state to another with various properties and time frames.

The other thing to note here is that we can't change multiple properties while working with CSS transition but CSS animation provides us this functionality.

📌 Let's talk about how complex these two modules are

The syntax of transition is a little easier than animation hence it is recommended to use CSS transition while manipulating DOM

On the other hand, keyframes syntax is quite difficult which makes it tough to work with JavaScript

I think these are some key differences between transition and animations. I hope you like this thread ❤

Peace out 😉