CSS Animations

📣 Sponsor

We've spoken about CSS transitions, but animations are slightly different. Animations can be independent of state or class changes, so we can have an animation start immediately. We also have control over direction, and a granular level of control over keyframes.

We will also introduce a new syntax in this article, which is the @ syntax used in CSS.

The animation tag

The animation tag looks a lot like the transition tag we previously covered. There is a single tag which is a shorthand for a number of other tags. The syntax looks like this:

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-iteration-count] [animation-fill-mode] [animation-delay] [animation-direction] [animation-play-state]

As you might expect, we don't need all of these properties, and in fact most implementations only use animation-name, animation-timing-function and animation-duration.


div {
    animation: myAnimation 1s linear infinite forwards 0.5s normal running;
    /* This can be separated out as separate properties.. i.e. */
    animation-name: myAnimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    animation-direction: normal;
    animation-play-state: playing;
}

A typical implementation using less properties:


div {
    animation: myAnimation 1s linear infinite forwards;
}

What do each of the tags mean?

animation-name - the name of the animation we'll play - we'll get to this in a moment.
animation-duration - how long the animation should be, usually in seconds, i.e. 2s
animation-timing-function - a keyword or curve for the timing function. It is usually ease, linear, ease-in, ease-out or ease-in-out.
animation-iteration-count - the number of times we'll run the animation. Can be any number, or infinite.
animation-fill-mode - the final state of the animation. If forwards the animation finishes on the last frame. The opposite is true for backwards.
animation-delay - the delay before the animation starts, usually in seconds, i.e. 2s
animation-direction - whether the animation goes from start to finish, or from finish to start. Can be normal for forwards, reverse for backwards, alternate for going forward and back over and over, or alternate-reverse for going back and forward over and over.
animation-play-state - if the animation is playing or not. It is running by default, but can be set to paused.

Animation Name

As we saw, we used animation-name to reference a specific animation name. Where does that come from? Well, we define that as part of our keyframes. We use @ to determine keyframes.

We first call @keyframes followed by the name of our animation. We can then call keyframes using percentages, i.e. 0% is at the start of the animation, and 100% is at the end:


div {
    animation: myAnimation 1s linear infinite forwards alternate;
    position: relative;
    width: 150px;
    height: 150px;
    background: orange;
    border-radius: 1000px;
}
@keyframes myAnimation {
    0% {
        left: 0px;
    } 
    20% {
        left: -20px;
    }
    40% {
        left: 0px;
    }
    100% {
        left: 200px;
    }
}

How that looks:

Fill Mode

Fill mode is a property which can seem confusing, but it's rather straight forward (pardon the pun). If set to forwards, the last keyframe is used, but if it's set to backwards (the default), the animation will end on the first frame.

Hover over these examples:

As you can see, on hovering over this example, the forwards example ends on the last frame, while the backwards animation ends on the first frame.

Backwards

Forwards

To and from

If your animation is a little simpler, you can also use to and from rather than percentages. Here, from refers to 0%, and to refers to 100%:


@keyframes myAnimation {
    from {
        left: 0;
    }
    to {
        left: 200px;
    }
}

Timing Functions

Timing functions here are exactly the same as in transitions. So we can replace animation-timing-function with any of those. If you need reference to these, please see our Transitions Guide

Last Updated 1617480045339