Animation recap

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!

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.

. I’ve made the colour scheme match what Google suggested American traffic lights look like.

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

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 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 within a keyframe for more granular control.

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

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.

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):

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

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 examples. Each is made entirely with HTML and CSS, using keyframe animation. Try forking one and see what you can do with it.