Animations in action

Now that we’ve looked at the transition property, let’s take a deeper look at the animation property.

A symbiotic relationship

The animation property is applied to an element just like a transition. It also needs a second part, called keyframes.

.element {
  animation: ...
}
@keyframes animation-name {
  /* Keyframes go here */
}

One benefit of having the keyframes defined separately is that it allows us to create animations that can be reused multiple times.

The animation property

Applying these keyframes to an element is done with the animation property. It is quite similar to transition but with some extra properties. An animation could be written as the following shorthand:

animation: change-background 4s linear infinite;

Written as individual properties it would look like:

animation-name: change-background;
animation-duration: 4s;
animation-timing-function: linear;
animation-repeat: infinite;

Where a transition takes a property, such as “background” or “all”, the animation property is given the name of the set of keyframes that describe the animation sequence.

Animations have some properties that transitions don’t. For example, we can tell the animation to alternate back and forth rather than looping from the beginning each time.

Keyframes

A set of keyframes in CSS is a series of stops along the way through an animation. Each “keyframe” is a written as a percentage.

I find it helps to describe this using an example. Let’s start with a div on a web page that changes background over time. It begins with a blue background, changes to an orange background and then finally green.

If we tried to explain to someone how these background colours changed over time, we might say something like:

“Start with a blue background, then orange background halfway through and finish with a green background”

Or, if we wanted to be more precise, we could use percentages to explain the timing:

“Start at 0% of the way through with a blue background, then by 50% through be orange, and at 100% have a green background”

We could then summarise this as:

0% Blue
50% Green
100% Orange

With these percentages we’ve created a series of “waypoints” that an animation might pass through. All we need to do now is tell the browser that these percentages are in fact keyframes and give the animation a name. The result is this:

@keyframes change-background {
  0% {
    background: blue;
  }
  50% {
    background: orange;
  }
  100% {
    background: green;
  }
}

The animation is called “change-background”. We’ll use that later when applying the keyframes to an element.

As you read the code from the top down, the percentages are describing how far through the animation each of these keyframes takes place. We can see it in action here:

As the animation takes place, the browser creates the in-between frames needed to go from each of the background colours to the next. By telling the browser that we wanted the div to begin one colour, be another one half way through and finish on a third, the browser can do the work of creating the animation between each of these points.

I’ve put together a CodePen example showing this in action.

Earlier, I mentioned using the animation-direction property to have an animation alternate. Here’s how it would look:

In this case I’ve changed the animation-direction property to alternate. See it on CodePen here.

Prefixes

For the moment it’s still necessary to use the -webkit- prefix on the animation property. I won’t add it to examples, but it will be needed for your animations to work in browsers such as Safari.

In CodePen you can use the “Autoprefixer” option within the CSS settings. For local development, I use the Gulp version of Autoprefixer. Prefix Free is a decent alternative also.

Homework

Open up this keyframes example and try changing the code. See if you can break it, and fix it. Even better, if you come up with something cool, let me know!

I love seeing how you’re getting on. You can email me or get in touch on Twitter.