CSS Animation: I Like the Way You Move it!

If you are building a modern website or a mobile app, you certainly need to animate some elements of your UI. Actually, I want to be even more drastic, you must do it.

Why? The reason is very simple: you want to have some animations because they are an extraordinary powerful tool that allows you go give a sense of speed and modernity to your UI. The animations allow you to focus your users' attention to a specific part of your app, and, of course, makes your UI more visually attractive.

Ok, so now that we've reached the agreement that you need to add some animations, let's see how you can implement them.

I'll bet that, if you are new to animations, your first thought is to use jQuery (or if you feel brave, vanilla JS. I mean, it makes total sense — jQuery has a method called animation and it's very simple and easy to use. But, I'm sorry, that's the wrong answer!

Before giving you the "right" answer, I want to dig a little deeper into the jQuery animation method, and discuss how it works and why it's not ideal.

Anatomy of .animate()

First of all, let's take a look at the method's interface:

animate( properties [, duration ] [, easing ] [, complete ] )

As you can see, there are a lot of options that allow you to customize your animations. In the first argument, the method takes an object with as the key property that you want to animate and as value (the new value of the css property). All the other arguments are optional — they allow you to set the duration of the animation (in milliseconds), the type of easing, and a callback function that will be executed at the end of the animation. As I said earlier: very easy and simple.

But what is this method doing, exactly? We can easily understand it by inspecting a DOM element animated using jQuery.

As you can see, jQuery is simply changing the value of the element’s properties. This is very slow because every single change causes the browser to repaint events (and other very bad and slow things). These operations are probably the most intense operations that the browser can perform:

CSS animations to the rescue!

There's a much more powerful alternative: CSS animations.

To use CSS animations, we have two options: we can use the transform property or create keyframe. These two options behave exactly the same way; the only difference is in the code and the different level of customization. Let's stop talking and see some code!

CSS transform

The transform property is very powerful, easy to use, and lets you apply some cool transformations to your elements. Some examples are scale, translate, and rotate.

How do we use this? Easy peasy! If you want to move an element of 50 pixels to the right, all you have to do is to add the following properties to your element:

transform: translate3d(50px, 0, 0);

translate3d is one of the many transform’s functions and this is it’s interface: translate3d(X, Y, Z)

CSS Keyframe

With keyframes, we have more control. In fact, we can tune virtually every single step of our animation. Take a look at the code below:

@keyframes my-cool-animation {
  0% {
    bottom: 0;
    left: 0;
  }
  33% {
    bottom: 20px;
    left: 20px;
  }
  66% {
    bottom: 300px;
    left: 300px;
  }
  100% {
    bottom: 320px;
    left: 320px;
  }
}

Yes, with keyframes we can specify a value for every step! This way, not only are we creating a custom animation but also a custom easing!

Now that we have our keyframe rule, we have to assign this rule to an element:

#div.my-animated-element {
    animation: my-cool-animation;
}

And that’s all!

Setting the animations parameters

I’m sorry, I was kind of lying, that’s not all...yet. We still have to add some more code to create our animations. In fact, if you try to add the above snippets to your stylesheets, you will see that the elements have new positions, but no fancy animations 😔

The good news is that I’m going to teach you how to fix it!

• If you are using the transform property you’ll need this:

transition:all 2s ease-in-out;

With this line of code, you can set the property you want to animate, the timing, and the easing (as usual for css you can also set this values independently using the extended version).

• If you are using keyframes, you will want to add this code:

animation: my-cool-animation 5s infinite;

Here, we are setting the animation name (as we previously did), the timing, and the number of times the animations should repeat.

The CSS animations secret

If you're still reading, you're probably wondering why CSS animations are better.

The truth is that CSS animations are faster because they are natively implemented in the browser, which handles animations in a highly optimized way! I’m sorry if you were waiting for a great revelation, sometimes the truth is just that simple!

Making our animations ever smoother

Before I close, there's a little trick that I want to share with you. For super heavy animations we can force the browser to render them using the GPU acceleration! By doing that, we can use the extra power of our GPUs to do some heavy computation, giving the CPU some rest, and result in smoother and more lovely animations.

The GPU acceleration is defaultly enabled by for some properties — one of them is translate3d. Simply add translate3d(0, 0, 0) to the elements that we want to render and all the hard work will be handled by he GPU! Thank you buddy!

Keep in mind, GPU acceleration can be ultra memory intense and can also require a lot of energy, especially on mobile devices. So, use it responsibly.

Wrapping it up

I hope the next time you're adding animations, you will choose the right tool. I’m not saying that jQuery animate() is evil, what I’m saying is that it can be evil sometimes, especially if you have a lot of animations and if your website is mobile oriented (and it should!).

This is a GIF of me kicking away jQuery animate() and choosing CSS animations()