A Beginner’s Introduction to CSS Animation

Nowadays, more and more websites are using animations, whether that be in the form of GIFs, SVGs, WebGL, background videos and so on. When used properly, animation on the web brings life and interactivity, adding an extra layer of feedback and experience for users.

In this tutorial I am going to introduce you to CSS animations; a highly performant way of doing things which is becoming more and more popular as browser support improves. Having covered the basics, we're going to build a quick example which will animate a square element into a circle:

An Introduction to @keyframes and Animation

The main component of CSS animations is @keyframes, the CSS rule where animation is created. Think of @keyframes as being stages along a timeline. Inside @keyframes, you can define these stages, each having a different style declaration.

Next, to make CSS animations work, you need to bind the @keyframes to a selector. This will gradually parse all the code inside the @keyframes declarations and change the initial style to the new style, based on the stages.

The @keyframes

Here we'll set the animation stages. Our @keyframes properties are:

A name of our choosing (tutsFade in this case).

Stages: 0%-100%; from (equal to 0%) and to (equal to 100%).

CSS styles: the style that you would like to apply for each stage.

For example:

@keyframes tutsFade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

or:

@keyframes tutsFade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

or the shorthand:

@keyframes tutsFade {
to {
opacity: 0;
}
}

The code above will apply a transition to the opacity of an element, from opacity: 1 to opacity: 0. Each of the approaches above will achieve the same end result.

The Animation

The animation property is used to call @keyframes inside a CSS selector. Animation can have multiple properties:

animation-name: @keyframes name (remember we chose tutsFade).

animation-duration: the timeframe length, the total duration of the animation from start to the end.

For the sake of readability during this tutorial I will continue further without using prefixes, but the final version will include them and I would like to encourage you to use them in your CSS code.

To find out more about vendor prefixes, you can check http://css3please.com/, which is a great website for vendor prefixes resources.

Multiple Animations

You can add multiple animations using a comma separator. Let’s say that we want to add an additional rotation to our tutsFade element, we'd do so by declaring extra @keyframes and then binding them to our element:

Square to Circle Tutorial

Let’s jump in and create a simple shape transition; a square to circle animation using the above principles. We will have five stages in total and for each stage we will define a border-radius, a rotation and a different background color to our element. Enough talking, let’s jump into coding.

Basic Element

First, let’s create the markup, an element to animate. We're not even going to bother with class names, we're just going to use a plain div for now:

<div></div>

Then, using an element selector (div {}), add default styling to the div:

div {
width: 200px;
height: 200px;
background-color: coral;
}

Declaring the Keyframes

Now let’s prepare @keyframes, which we'll call square-to-circle, and the five stages

@keyframes square-to-circle {
0%{}
25%{}
50%{}
75%{}
100%{}
}

We need to define some styes within these stages, so let's begin by dictating the border-radius for each corner of the square:

Apply the Animation

Here you see we've added a shorthand animation property, which states:

The animation-name is square-to-circle.

The animation-duration is 2s.

The animation-delay is 1s.

The animation-iteration-count is infinite, so it will carry on indefinitely.

And the animation-direction is alternate, so it will play from beginning to end, then back to the beginning, then again to the end, and so on.

Use Timing-Function Awesomeness

One last value we can add to the animation property is the animation-timing-function. This will define the speed, acceleration and deceleration of our movement. This function can be a very detailed value, which is awkward to calculate manually, but there are a lot of free websites which provide resources and live customisation for animation timing functions.