Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

There is a book called The Illusion of Life by Ollie Johnston and Frank Thomas,

two of the animation masters at Disney’s during the Golden Age of animation, referred by Walt Disney as his “Nine Old Men”.

In it, it lays out 12 basic principles of animation. Vincenzo Lodigiani somewhat recently interpreted those principals using a simple three dimensional box as the “character”. For instance, one of the principals is anticipation, for which he made this animated GIF:

There is also a fun video with all of them:

Here on CodePen, Jeroen took a crack at converting those into CSS animations. His blog post demonstrates all of them. Here’s one:

See the Pen Overlapping by Jeroen (@jeroens) on CodePen.

Donovan Hutchinson also took a crack at it! Donovan writes at the CSS Animation blog, where he published them in his post Animation Principles for the Web. He created a collection of all the principals. Here’s one:

See the Pen #10 Exaggeration – Animation Principles for the Web by Donovan Hutchinson (@donovanh) on CodePen.

Pretty cool.