Is CSS animation better than JavaScript?

My article on Friday about overengineering CSS apparently hit a chord with a lot of readers.

The responses I got were a mix of “hell yes!” and “how do you approach CSS in your projects?” Today, I wanted to talk more about when I use CSS vs. JavaScript.

CSS before JS

My general rule of thumb is…

If something I want to do with JavaScript can be done with CSS instead, use CSS.

CSS parses and renders faster.

For things like animations, it more easily hooks into the browser’s refresh rate cycle to provide silky smooth animations (this can be done in JS, too, but CSS just makes it so damn easy).

And it fails gracefully.

A JavaScript error can bring all of the JS on a page to screeching halt. Mistype a CSS property or miss a semicolon? The browser just skips the property and moves on. Use an unsupported feature? Same thing.

You can take this rule too far, though

A few years ago, there was an obsession with finding creative CSS hacks for things that would normally be done in JS.

A CSS-only expand/collapse navigation menu is the one that jumps to mind. Here’s an example. These are really cool examples of pushing CSS farther and thinking about code creatively, but…

The results are often wildly inaccessible.

Here’s the demo from the example I linked to. Hover over About or Portfolio. Works great!

Now, reload the page and try to tab through the menu. Nothing shows up. You can access the submenus below those items if you’re a keyboard only user.

There are times where, for accessibly, using JavaScript is actually better than using CSS.

A mental model for making decisions

I don’t really have a formal model for choosing when to use CSS vs. JS, but approach to which one to use and when looks like this:

• If the item requires interaction from the user, use JavaScript (things like hovering, focusing, clicking, etc.).
• If the item needs to change in visibility, needs to be animated, or have any other visual change made to is, use CSS.

Often times, these two are combined.

For example, let’s talk about the drop-down menu example we looked at earlier. You can detect focus on the drop-down link with CSS, but once you tab into the links below it, the original link loses focus.

I would use JavaScript to detect a change in focus, and then check if the currently in focus element is either that link or one of the items below it.

If either of those conditions is true, I would add a class to the dropdown menu that makes it visible. You could also use that class to add animations and do all sort of other fun stuff.

Tomorrow, I’m going to talk about my preferred CSS methodologies, and how I use them to write stylesheets that are absurdly tiny and performant.

Why should you choose one or the other? Take a look.

Goal

The main goal of this article is to make a comparison between CSS and JavaScript in order to create animations, providing pro and cons and when it’s convenient to opt for one approach or the other. Besides, we will be looking into a few examples of simple transitions and animations with CSS and JavaScript.

Let’s begin by displaying a few examples of basic transitions with both approaches:

Code

Using CSS.

Using JavaScript.

On the second block of code, in order to pull off a similar output using JavaScript, we need to add event listeners (onmouseover, onmouseout) to the buttons, and define scripts so as to update the element styles on such event listeners.

So far, it doesn’t seem much of a difference in terms of complexity, later on we will be looking into a more complex animation.

Pros and Cons

JavaScript:

• JavaScript-based animation delivers far more flexibility, power and better workflow for complex animations and rich interactivity, as JavaScript is imperative — you are able to programmatically define the animation — .
• Creating animations with JavaScript is, by comparison, more complex than writing CSS transitions or animations

CSS:

• They’re easy to use for simple animations; you can start creating without the need of having to know about JavaScript.The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
• Letting the browser take the control of the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren’t currently visible.

If you can do an animation with CSS over JavaScript, don’t think it twice.

More examples

In this example, we will be producing an animation using JavaScript to move an element from left to right infinitely:

Example: Animation with JavaScript (modifies the position of the ball over time).

However, we can also use CSS in order to achieve a similar result, by defining @keyframes to take control of the animation sequence.

In this code block, we’ve described the animation declaratively: its start position, end position, duration, etc. This tells the browser ahead of time the behavior of the animation, indicating which CSS properties will be modified.

Animating SVG with CSS.

We can also animate SVG assets using CSS, here’s an example:

Animating SVG line with CSS.

Conclusions

• We can use either CSS or JavaScript to create animations. What we opt to use will depend on the complexity of the animation and rich interactivity we may need.
• We should always try to create our animations using CSS where possible. If the animations we are to create are really complex, we may have to rely on JavaScript-based animations (or JavaScript libraries) instead.