A still from the archery contest scene in the animated Pixar movie Brave

We can create more realistic CSS animations on our pages by using principles established by classical animators, such as the “Nine Old Men” of Disney, and even earlier, from the antecedents of Greek theatre.

Anticipation is the motion before a main action sequence, usually in the direction opposite to the main action: think of a baseball pitcher winding up to throw a strike, or an archer drawing a bow. Anticipation builds momentum and tension to your animation, telegraphing the action to come to the audience. Moving an element down (“antic down”) implies that the main action will be upward; “big antic” in one direction usually precedes large, swift motion in the opposite direction.

Anticipation and follow-through in a bezier curveFollow-through is the recovery portion of the movement, after the main action sequence; think of the motion of that baseball pitcher immediately after the ball is released.

Both of these concepts tie into using exaggeration to show extremes of motion that would not occur in real life. (Note that the degree of exaggeration is an artistic interpretation, rather than a natural physical property: historically Disney uses subtle exaggeration, whereas animation production houses like Hanna-Barbera used it to extremes). Ease-in and ease-out also play a part.

To recreate these principles in CSS, we can introduce values for our Bezier timing functions that are negative and/or greater than 1. This creates an S-shaped Bezier curve, as you can see to the right, and the CSS transition code below:

Merida
Example of anticipation and follow-through in CSS3 animation

Used for a simple transition on hover (note that the code below lacks vendor prefixes):

img#merida {
	width: 114px; height: 114px;
	margin-left: 50px;
	border-radius: 6px;
	overflow: hidden;
	display: block;
	box-shadow: 6px 6px 4px rgba(0,0,0,0.3);
	transition: all 1.3s cubic-bezier(0.500, -0.440, 0.670, 1.475);
}
img#merida:hover {
	transform: translateX(500px);
}