Animation in CSS3

Written by Antony D'Andrea

Flash has been dying a slow death during the past few years but it would seem the end is finally nigh(ish) as Adobe announced they will stop updating it from 2020. Hopefully this will give those last few stubborn websites time and encouragement to migrate away (I am looking at you Ticketmaster).

There are many many web standards and technologies already matching and exceeding the abilities that Flash had and in this post, I wanted to look at animation in CSS. I think it is a really cool thing that you can create animation without any code using just stylesheets!

Keyframes

Every animation is made up of keyframes. Keyframes define styles at each stage of the animation as well as the name of the animation.

For my example, I have a basic, red, square div block:

I have put an arrow in it to signify which way is the starting position because I am going to animate it so that it rotates.

So I have started with the following CSS:

@keyframes rotation {
    0% {
        transform: rotate(0turn);
    }
    50% {
        transform: rotate(0.5turn);
    }
    100% {
        transform: rotate(1turn);
    }
}

I have named the animation "rotation". I have 3 steps. Steps are signified as percentages, this is because you specify the time for the animation later.

As you can see, I have 3 steps and I am using the transform property to rotate it.

Animation Properties

Now that I have my animation declared, I can use it using the animation property. In the div CSS, I add the following:

animation-name: rotation;
animation-duration: 10s;

Obviously, the name matches the name of the keyframes that I made earlier. And the duration is how long the entire animation should take, in this case 10 seconds.

If I refresh the screen, I see the animation. I took the liberty of making a gif to illustrate this (by the way, I used this tool to record this, very useful!):

Small Improvements

You can see that half way through, it stops and then continues. This is because of the nature of the rotate function. I want it to complete a full rotation without stopping.

To do this is simple, I just remove that second step, so I have:

@keyframes rotation {
    0% {
        transform: rotate(0turn);
    }
    100% {
        transform: rotate(1turn);
    }
}

This then creates:

You can not tell from the gif (as it is a looping image) but this does a single run of the animation and then stops until I refresh the screen.

You can specify the number of times that you want the animation to run using the CSS rule animation-iteration-count. This can also be used to make it run indefinitely. Simply add to the CSS block that you apply the animation to earlier:

animation-iteration-count: infinite;

This will have the animation go on forever.

Short Hand

One last thing that I wanted to show, is the shorthand method of applying an animation to an element.

What we have now in the CSS for the square is the following:

animation-name: rotation;
animation-duration: 10s;
animation-iteration-count: infinite;

This can actually be written in a single line:

animation: rotation 2s infinite;

As you can see, this is much cleaner to read.

Summary

As you can see it is very easy to get started with building animations with CSS. There are loads are libraries out there that can rally take things to the next level. There is a this great article that has some incredible examples of what can be done with CSS animations.

As for browser support. CSS Animation is supported on every modern browser and has been for some time so that is good.

You may also want to take a look at this article, which explains the other transform capabilities other than just rotate. Remember, you can apply whatever CSS you like in the key-frames not just transformations.

© 2012-2023