Animations

So far we’ve discussed why we animate, found some sources of inspiration, looked at tools and sites we might find useful for development, and learned what transitions are.

Next, allow me to introduce the animation property.

Animation in the browser

Transitions and animations are similar. Both take the form of a CSS property, and have duration, delay and other ways of controlling how the browser creates the movement.

While transitions are all about smoothing the change from state A to state B, animations are a way to describe multiple steps.

Animations are useful for more complex movement in the browser. In the above example, there are 3 states (A, B and C). A transition would only go from A to C while an animation allows us to specify what step B looks like and make sure the animation follows all three steps.

Animations also behave a little differently. They can begin automatically. While a transition might require adding a class or a change of state such as hovering, animations can start when the page loads.

This means that if telling a story or drawing attention to something on a page, animations can be a good choice.

Examples

The “Save” button movement we see on Codepen is a good example of a practical animation.

It does a great job helping people notice the button.

The effect is made up of a series of keyframes that tell the browser to shake the button from left to right. We’ll dig more into keyframes in greater depth in chapter 3.

We can do so much more with CSS positioning and keyframe animations. For another example check out this CSS-only 3D Mac Plus!

This CSS Mac Plus is available on CodePen and here’s a step-by-step guide to building it.

Transitions vs. Animations

Transitions are when the browser animates from one state to another (A to B). They’re usually triggered by an action such hovering over an element, or adding or removing a class using JavaScript.

Animations are more involved, and let you create sequences of animations with as many keyframes as you need along the way. They trigger automatically, and can loop.

We’ll take some time to work on the animation property later.

Homework

Can you think of ways animations might be used on your web pages? Keep an eye open for animation when browsing. Look out for when something moves in a way that calls attention to itself. In these cases it’s usually an animation.

If you’ve downloaded the starter HTML and CSS, take a look for the animation property. Unlike transitions, animations need a second part, called keyframes. Try changing some values and see what happens.