A quick introduction to CSS animations

In this article you’ll learn the basics CSS animations, which allows you to gradually change an element’s style from one state to another.

It’s ideal if you just need a simple animation, and want to stay away from JavaScript.

As you read through the article and get familiar with the concepts, I’d recommend you to check out this interactive Scrimba screencast below, where you’ll be able to play around with the code yourself. Try experimenting with the animation yourself, so that you’ll properly grasp how the technology works.

Now let’s get started!

Thanks to Neil Rowe for the awesome screencast.

Creating the keyframes

The first thing we need to do is to create a @keyframes rule. This is where you specify how your animation will play out from beginning to end.

Let’s create an animation called test:

Inside of test, we’re using percentages to represent the steps in our animation. 0% represents the beginning of the animation and 100% represents the end.

We also need specify what kind of state we want our element to be in at each given point in the animation. In this case, we’re simply flipping background-color. It will be changed to green, purple, orange and blue, and CSS will take care of creating smooth transitions between the colors.

Note: we could also have used from and to instead of percentages. However, percentages gives us much more flexibility.

Applying it to an element

This animation can used by any element on the page. We’re going to use it on the div tag with the id of myDiv, which we’ve styled as a small red square.

The div we’re going to animate.

To make myDiv use our animation, we set its animation-name property to test, like this:

As you can see we also give it animation-duration of 4 seconds. This will result in the following happening:

It’s a gif, so it’s looping, which makes it a bit hard to identify the beginning and end.

Customizing it

There are eight different animation properties in CSS, all of which can customize your animation in various ways:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

Note: the CSS animation property is a shorthand property the eight properties above, meaning you could write it all in one line if you wanted. However, in this articles, we’ll use them separately.

If we for example want our animation to repeat twice and also delay two seconds before kicking off, we’ll do the following:

Easing

The final concept we’re going to learn is easing. Easing is used to make an animation look more natural by adjusting the speed throughout the animation. You’ll immediately notice if an animation lacks easing, and rather moves linearly from start to end, as your brain is used to seeing things move with easing in nature.

To specify the easing we want, we’ll use the animation-timing-function property. Here are some of the values it can take:

• linear
• ease (default)
• ease-in
• ease-out
• ease-in-out

To make is easier to see how easing works, we’ll animate the width instead of the color of #myDiv. So we’ll change the test keyframe to the following:

And we’ll set #myDiv to:

As we’re not specifying the easing, it’ll use the ease value by default, which makes the animation look natural.

If you look closely, you’ll notices that it eases in and out in both steps of the animation, both from 0% to 50% and from 50% to 100%.

In each step, it starts off slow, then speeds up, before it slows down again towards the end.

Note: it’s the gifs that makes these animations look choppy. In the browser, it’ll the frame rate is much better.

Now let’s set theanimation-timing-function to linear to make it apparent how important easing is:

As you can see, this feels a bit less natural. The two steps have been merged into one, as the div is growing with the same speed throughout the entire animation.

Now that we’ve gone through the basic theory, I’d recommend you to play around with the code in the Scrimba screencast that was embedded to the top of this article (alternatively, check it out here).

Try to edit and run the code, so that you get an understanding of how your changes affects the animation.

God luck, and happy coding!

Thanks for reading! I’m Per, co-founder of Scrimba, a tool to create interactive coding screencasts. Be sure to check it out if you’re interested in learning more about web development.