Animation recap

We’ve covered a lot of detail so far! I hope it’s making sense.

When learning this, I must admit it took me a while for this animation and keyframe stuff to make sense to me. If it’s not clear yet, don’t be frustrated. Keep at it, and bit by bit the various tricks of using animation in HTML and CSS will become clear.

In this chapter we’re going to take a moment to recap what we learned. But first, we’ll take a look at that homework challenge!

Homework challenge: Traffic lights

The homework challenge should have been easy. Well, it’s easy if you know how. I’ve created an updated version of the UK-based traffic light demo, this time changing the sequence to remove the “red + amber” stage.

See it in action here. I’ve made the colour scheme match what Google suggested American traffic lights look like.

Recap: Animations

In this section we looked at the animation property and how it works alongside keyframes.

Like a transition, only different

While the animation property looks and works in a way that’s similar to transition, it has some subtle differences. While a transition will only occur when an element changes, animations can begin straight away.

Using the various properties, animations can loop a certain number of times (or forever), and can even begin with a negative value for their delay. This starts the animation with it already having progressed.

By default, animations will play from start to finish, then jump back to their default state. We can have the animation freeze at its end point by using the animation-direction property of forwards.

Animations use timing-functions, much like transitions. However, the timing function applies to each individual keyframe, not the entire set of keyframes. Instead, you can specify animation-timing-function within a keyframe for more granular control.

Finally, animations can be specified in shorthand, just like transitions:

animation: keyframe-name 2s forwards linear;

Keyframes

Every animation needs to reference a set of keyframes. These keyframes are a series of percentages, describing each “stage” of the animation. The browser fills in the gaps automatically.

Keyframes have their own shorthand (to and from) when you want to only go from one state to another.

Stacking percentages beside each other can have the animation “pause” at that stage.

Lastly, it’s possible to omit the 0% keyframe and the browser will take the element’s style as implied. For example, to have something fade away, we don’t necessarily have to give it a starting opacity of 1 (assuming the element is already visible):

@keyframes name {
  100% {
    opacity: 0;
  }
}

Putting them together

When we want to use an animation, we always have the two pieces:

.element {
  animation: keyframe-name ...
}
@keyframes keyframe-name {
  ...
}

Homework

At this point we should be clear on the different between the animation property and the transition property.

Have a look at some of the Principles of Animation for the Web examples. Each is made entirely with HTML and CSS, using keyframe animation. Try forking one and see what you can do with it.