Frontend Engineering, Volume II

CSS: Chapter 10 Companion—Animation

© 2014, Martin Rinehart

The word "animation:"

Animations as essential communicators:


Beginning of animation:

More on the history of animation:

The zoetrope (c. 180 CE):

From Edison's labs:

The Lumiere brothers:

Film as we now know it:

The birth of the full-length, animated film:

The arcade video game, Pong:

Timing Functions

Good quick reference for values you might forget:

More details, animated examples:

Even more details (good cubic bezier curve explanation) and more examples:


First W3C Working Draft, Transitions:

Transitions publication history:

Basic transitions in film (some video missing):

Standard video transitions (Flash-based examples):

From a major "cinema how-to" site:


Coyier, again. Good on the CSS basics, up-to-date:

Great on animation (Disney would be proud). Getting old on CSS:

Amazing CSS3 (plus some JavaScript) animations:

Transitions and animations in Apple Safari, 2007:

And more Coyier. Starting animations in the middle!

Apple/Adobe conflict ('09)?:

CSS animation as threat to Adobe Flash:

Animated Cube

Standard cube, but animated:

A slick cube with images embedded in data URLs:

Fun, though with really ugly logos:

A very recent example:


Not really a carousel, but close:

Repeating images, flat 2D:

Not 3D, 'CSS only' but requires jQuery:

A rare, unaswered question on SO:

Feedback: MartinRinehart at gmail dot com

# # #