CSS Secrets

8 Transitions & Animations

42 Elastic transitions

Prerequisites

Basic CSS transitions, basic CSS animations

The problem

Elastic transitions and animations (i.e., transitions that “bounce”) are a popular way to make an interface feel more playful and realistic—when objects are moving in real life, they rarely go from A to B with no elasticity.

From a technical point of view, a bouncing effect is when a transition reaches the final value, then rewinds for a little bit, then reaches the final value again, one or more times diminishingly, until it reaches the end for good. For example, let’s assume we are animating an element styled like a falling ball (see Figure 8.1), by transitioning transform from none to translateY(350px).

Why use transforms and not some other CSS property, like top or margin-top? At the time of writing, transforms tend to be smoother, whereas other CSS properties often snap to pixel boundaries.

Of course, bounces are not just about positional movement. They can greatly enhance almost any kind of transition, including:

• Size transitions (e.g., making an element larger on :hover, displaying a popup that grows from transform: scale(0), animating the bars in a bar chart)

• Angular movement (e.g., rotations, a pie chart whose slices grow from 0 via an animation)

Quite a few JavaScript libraries offer animation capabilities with bounce built in. However, these days we don’t need scripting for animations and transitions any longer. However, what’s the best way to code ...