Should you use CSS or JavaScript for animations?

To answer this question, you have to to first recognize that there are three ways to create animations. They are:

  1. CSS Transitions
  2. CSS Animations
  3. JavaScript

CSS Transitions are animations you create with the transition property.

CSS Animations are animations you create with the @keyframes and animation properties.

JavaScript animations are created with JavaScript. Here, we’re specifically talking about using a JavaScript API to create animations. Most of the time, that means your JavaScript manipulates the CSS of your document in some way.

For example, Greensock Animation API is the best JavaScript animation library out there at this point. To move an object from the left to right, you can change the transform property with x. If you look in the browser, it’s actually manipulating the CSS at an extremely fast rate.

With the basics covered, let’s get to the meat of the question—when should you use CSS and when should you use JavaScript?

Two criteria for deciding between CSS Transition, CSS Animations and using JavaScript for animations

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.

If there are more than two states, consider CSS Animation or JavaScript.

The lines between CSS Animation and using JavaScript to create animations is a bit blurred, but generally speaking, it’s harder to create complicated animations with CSS Animations. So, if your animation is semi-simple, like having 3-5 defined states, you can consider using CSS Animations.

If your animation is complicated, like you need to chain lots of different elements together, morph some SVG, chain different events together, use JavaScript.

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.

For other animations, you probably need triggers, like a mouse over, a click event, a submit event, a change event, a custom event, or any other events you can listen to in JavaScript. For these animations, I’d choose between CSS Transitions and using JavaScript to create animations.

So there you have it, my simple criteria for deciding between when to use CSS or when to use JavaScript for animations.

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.

Hold on while i sign you up…

🤗
Woohoo! You’re in!
Now, hold on while I redirect you.