Why would someone use CSS animations instead of JavaScript animations

IMO there's a progression in web animations, considering how useful and easy they are.

Viewed as some kind of pyramid of needs, the very bottom would be element state transitions. If you have a red button that turns blue on hover, then having a smooth transition between these colors is the level 1 of web animation. Sounds obvious, but it also applies to disabled states, focus, active, and so on. For those obviously, you use CSS transitions

Next up are class transitions. They're pretty much the same thing really except you're going to work on the transition between when an element has a class and when it doesn't. If you have a tab component for example, with the tab labels at the top, then you could have an .is-active class on the active label and work on the transition between default inactive state and the active state. It's very similar but most often this will be used for more than just the element applied to, sometimes you'll also change the styles of the children element as well. Same here for the CSS part you use transitions and for the changing of class you use JS.

Then you have CSS animations, which sometimes you'll have an obvious need for that's easy to work on, like a loader that spins, that's like the basic example of a need for a css keyframe animation, but sometimes you'll also use them to work on the animation when an element is inserted in the DOM, or when a class changes. These pretty much only make sense if you want to use some kind of sequencing in your animation, which the use of keyframes offers over the simplicity of CSS transitions. Just putting it in there, often they don't really make sense.

After that we get in the more difficult territory : animation element appearing and leaving the DOM, or just turning visible or invisible. This can be very simple if they're out of the flow, like a tooltip that pops up, but if they're in the flow, like an accordion box between paragraphs for example, you have to push stuff around. Sometimes you'll be able to get by with just CSS (animating max-height for example) if you have some knowledge of what edge cases content can be, but sometimes you'll have no clue and you'll have to use JS for that to measure the size of elements before and after they're visible... Because this is quite important for the look and feel of a website or app, but also sometimes very tricky to do well (with good perf) there are many libraries that aim to solve these kinds of issues, and they're always in JS (with minimal CSS transitions).

About there you can have scroll transitions. They can be as simple as using JS to detect when an element becomes visible and use basic state transitions, but it can also be complex, like really using the scroll distance to play the transition as the scroll happens (when you scroll through 20% of a given area you play the animation up to 20% of its' duration, etc)... There are either basic JS + basic CSS or complex JS, and everything in between.

Lastly you have page transitions. They're more common in mobile apps but start getting more common in websites : If you have the index page of a blog with list of posts that have an image and a title, the page transition would be that on click on a post, the post thumbnail moves to become the background of the page and the titles moves as well, before the rest of the content appears, as if you'd never left the page. This is a lot easier to do on mobile apps because the viewport dimensions never change so you can move elements absolutely as much as you want and only want to rethink the position of the elements on orientation changes, if you allow them. On the web it's a lot trickier, from z-index issues to perf requirements and because you have to deal with responsive, viewport changes, the fact that you website can be seen from a smartwatch or a smart fridge display or a car dashboard... These are very hard and pretty much always done in JS only.

And now that I've covered most kinds of animations and how they're done, here comes nuance : sometimes based on the organisation you're in, your skills, the context of the project, you may not want to use what's usually the most suited, but go with what everyone's comfortable with. Where I work for example very few people are comfortable with complex CSS so we often do in JS some animations that could be done in CSS. It has a small cost in perfs in some cases, and sometimes to me it feels like the code is more complex than needed, but it ensures the maintanability of the code and the animation, because more people are able to understand it.

So yeah, there's no "better" and there are many many kind of animations. Pretty sure you have more questions now than you had before :D

When should you use CSS for animations? When should you use JavaScript for animations? Is one better than the other?

Should you always try to use CSS to animate your components as much as you can? What about “hardware acceleration”?

These questions ran through my head as I learned to animate websites. When I first started, I read so much about “hardware acceleration” and downsides of using JavaScript that I focused entirely on CSS for all my animations.

I actively avoided JavaScript because I thought JavaScript animations didn’t perform well. Besides, I didn’t want to be that guy that doesn’t provide a good experience for people who don’t have JavaScript.

I only realised much later that I made my life insanely difficult by avoiding JavaScript. To make things worse, I created inaccessible websites while trying to avoid JavaScript altogether.

So, I learned that you can use both CSS and JavaScript to create animations. The question is when to use which.

Creating silky smooth animations

If you have the misconception that JavaScript can’t be used to produce smooth animations, you can drop it now. Both CSS and JavaScript can be used to produce silky smooth animations. You don’t need everything to be “hardware-accelerated”.

Why is that so?

Many computers refresh at a rate of 60 frames per second. For your animations to be smooth, the browser needs to update your animation within this rate. In other words, browsers need to update your website at least once every 16 milliseconds (ie once every 60th of a second).

So, your job is to make sure you don’t create animations that require browsers to do so much work that it can’t update the screen within 16 milliseconds.

To ensure the browser doesn’t do extra hard work, you should only change the following four properties. (Find out why in Paul Lewis’ and Paul Irish’s article on High Performance Animations). It doesn’t matter whether you change them with CSS or JavaScript.

1. Translate (from the transform property)
2. Rotate (from the transform property)
3. Scale (from the transform property)
4. Opacity

With performance-related questions out of the way, let’s focus on when to use CSS/JavaScript for your animations.

Animating with CSS and JavaScript

There are three ways you can create animations:

1. With CSS transitions
2. With CSS animations
3. With JavaScript

When to use CSS transitions

CSS transitions allow you to change CSS properties between two states — the beginning state and the end state.

To use CSS transitions, you specify the properties you want to animate with the transition property.

button {
  background-color: turquoise;
  transition: background-color 0.3s ease-out;
}

button:hover {
  background-color: pink;
}

You can also transit properties with the help of JavaScript. To do so, you can either change the property directly, or add/remove a class to/from the element.

// Changing a CSS property
button.style.backgroundColor = 'blue'

// Adding a class
button.classList.add('is-selected');

// Removing a class
button.classList.remove('is-selected');

CSS transitions are best for simple animations that contains only two states. When you need to animate something over multiple different states, you might want to consider CSS animations or JavaScript.

When to use CSS animations

CSS animations allow you to animate any CSS property through any number of states. You can even use it to create a slightly-more-complicated animation like this hand-waving animation:

To create a CSS animation, you specify the properties you want to animate with the animation property, and you declare your animation with @keyframes.

/* Declaring the animation */
@keyframes swing {
  0% {
    transform: translateX(-3em);
  }

  100% {
    transform: translateX(0);
  }
}

/* Specifying the animation */
button {
  animation: swing 1s ease-in-out infinite alternate;
}

To create the hand-waving animation, you first have to code all six possible states into your @keyframes declaration. It looks like this:

@keyframes wave {
  0% { transform: rotate(0); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-15deg); }
  60% { transform: rotate(15deg); }
  80% { transform: rotate(-15deg); }
  100% { transform: rotate(0); }
}

.wave-hand {
  transform-origin: bottom center;
  animation: wave 1s ease-in-out infinite;
}

Notice the percentages like 0% and 40% in the @keyframes syntax above? These percentages indicate the CSS values to display on your site at that completion rate.

Let’s say you have an animation that lasts two seconds. A 50% would mean the one-second mark while 75% would mean the one-and-a-half-second mark. If your animation lasts four seconds, 50% would mean the two-second mark, while 75% would mean the three-second mark.

When you first code your animation, you will likely not be able to correctly identify your animation duration between each state, so you’ll have to recalculate the percentages a couple of times. It’s a chore.

For this reason, I highly recommend you use JavaScript animation libraries to give yourself a better experience when creating animations.

The only exception is when you need your animations to run without JavaScript — then CSS animations are preferred.

When to use JavaScript

Well, you probably have a good idea by now — when you have an animation that’s complex (which means you can’t use CSS transitions, and it’s hard to use CSS animations), you’ll want to use JavaScript.

When you use JavaScript to animate, you change the value of a CSS property over time. This process can be done manually (you calculate and set the value of a CSS property at every frame) or through a JavaScript library (like the Greensock Animation API).

If you inspect the console, you’ll see how quickly JavaScript updates the CSS property (in this case, transform).

If you’ve been keeping up with the latest developments, you’ll also know you can create animations through the Web Animations API, which means you don’t need to use an external animation library.

Sadly, at the time of writing, the Web Animations API is still not ready for prime time.

When you create animations with JavaScript, I highly recommend you use the Greensock Animation API (GSAP). It’s the fastest and most well-supported library out there. There’s an introductory tutorial to help you get started with GSAP on my site.

If you want inspiration of things built with GSAP, you can check out Sarah Drasner’s and Chris Gannon’s CodePens. They’re amazing.

But what if people don’t have JavaScript?

When would you animate things? Think about this question for a moment.

Usually, you either animate things right when the page loads, or when a user interacts with a specific element on your page (like click a button).

If you need to animate things when your page loads, you can rely on CSS animations. No worries about that.

If you need to animate things when a user interacts with elements on your page, you can’t run away from JavaScript.

Why?

You can only tell if a user has interacted with an element if you’ve added an event listener to the document/element. Adding an event listener requires JavaScript, so most of your animations (CSS transitions or otherwise) wouldn’t work without JavaScript anyway.

Then, the question isn’t about supporting animations for users without JavaScript. They simply don’t get any animations from their interactions.

So what you should do is to make sure your site works well without animation. Your users should be able to see what they came to your site for — your content — even without JavaScript turned on.

When users with JavaScript come to your site, you can give them an enhanced experience with animations. Be liberal with your use of JavaScript here.

This is a concept called progressive enhancement. If you’d like to find out more it, you can follow Aaron Gustafson, listen to this episode of The Web Ahead podcast, or read Aaron’s evergreen article Understanding Progressive Enhancement on A List Apart.

Wrapping up

You can use CSS and JavaScript to create animations. What you use depends on the complexity of the animation.

For simple two-state animations, I recommend you use CSS transitions. For more complicated animations, I recommend you use CSS animations or JavaScript.

At the time of writing, the Web Animations API is still not well supported yet, so the best possible way to animate is with GSAP, which is an amazing library.

Make sure you provide a non-animated, but workable version of your site for people who don’t have JavaScript enabled. They should still be able to use your website even when it’s not animated.

If you found this article helpful and would like to read more articles like this one, feel free to pop over to my website.

You may also like Learn JavaScript — a course that helps you learn to build real components from scratch with JavaScript.

Is CSS animation better than JavaScript?

Why would someone use CSS animations instead of JavaScript animations quizlet?

Why would you use a CSS animation instead of a transition What are the differences between the two?

Is JavaScript good for animations?