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 π
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh