To answer this question, you have to to first recognize that there are three ways to create animations. They are:
- CSS Transitions
- CSS Animations
CSS Transitions are animations you create with the transition property.
CSS Animations are animations you create with the @keyframes and
x. If you look in the browser, it’s actually manipulating the CSS at an extremely fast rate.
First, I look at the complexity of the animation. Does the animation contain more than two states? That means, one start and one end. If a button changes color from blue to red, there are two states, blue and red.
If a button changes color from blue to green then to red, there are three states. So that’s the definition of states.
If there are only two states, always use CSS Transitions. That’s what it’s made for.
The second criteria I look at is the trigger for the animation.
What kind of trigger do you need? If you don’t need a trigger at all, then it’s best to opt for CSS Animation because it starts without you doing anything. It’s also cross-broswer friendly and works even if who has JavaScirpt disabled goes onto your website.
I hope this video has been helpful for you. With that, Merry Christmas, and have a good weekend!
My website: https://zellwk.com Transcript: https://zellwk.com/blog/css-or-js-for-animations CSS Transition tutorial: https://zellwk.com/blog/css-transitions CSS Animation tutorial: https://zellwk.com/blog/css-animations
Merry Christmas and have a good weekend!
If you liked this article and felt that others should see it too, please consider sharing it.