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.

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

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);
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.