Frontend Engineering, Volume II

CSS: Chapter 10 Companion—Animation

© 2014, Martin Rinehart


The word "animation:" http://en.wiktionary.org/wiki/animation.

Animations as essential communicators: http://alistapart.com/article/web-animation-at-work.

History

Beginning of animation: http://en.wikipedia.org/wiki/Animation.

More on the history of animation: http://en.wikipedia.org/wiki/History_of_animation.

The zoetrope (c. 180 CE): http://en.wikipedia.org/wiki/Zoetrope.

From Edison's labs: http://en.wikipedia.org/wiki/Kinetoscope.

The Lumiere brothers: http://en.wikipedia.org/wiki/Auguste_and_Louis_Lumi%C3%A8re.

Film as we now know it: http://en.wikipedia.org/wiki/History_of_film.

The birth of the full-length, animated film: http://en.wikipedia.org/wiki/Snow_White_and_the_Seven_Dwarfs_(1937_film).

The arcade video game, Pong: http://en.wikipedia.org/wiki/Pong.

Timing Functions

Good quick reference for values you might forget: http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp.

More details, animated examples: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function.

Even more details (good cubic bezier curve explanation) and more examples: http://www.the-art-of-web.com/css/timing-function/.

Transitions

First W3C Working Draft, Transitions: http://www.w3.org/TR/2009/WD-css3-transitions-20090320/.

Transitions publication history: http://www.w3.org/standards/history/css3-transitions.

Basic transitions in film (some video missing): http://mentalfloss.com/article/21028/5-film-transitions-worth-knowing.

Standard video transitions (Flash-based examples): http://www.mediacollege.com/video/editing/transition/types.html.

From a major "cinema how-to" site: http://www.elementsofcinema.com/editing/types-of-transition.html.

Animations

Coyier, again. Good on the CSS basics, up-to-date: http://css-tricks.com/almanac/properties/a/animation/.

Great on animation (Disney would be proud). Getting old on CSS: http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/.

Amazing CSS3 (plus some JavaScript) animations: http://webdesignerwall.com/trends/47-amazing-css3-animation-demos.

Transitions and animations in Apple Safari, 2007: https://www.webkit.org/blog/138/css-animation/.

And more Coyier. Starting animations in the middle! http://css-tricks.com/starting-css-animations-mid-way/.

Apple/Adobe conflict ('09)?: http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/.

CSS animation as threat to Adobe Flash: http://www.applethoughts.com/news/show/92481/css-animations-a-flash-substitute.html.

Animated Cube

Standard cube, but animated: http://desandro.github.io/3dtransforms/docs/cube.html.

A slick cube with images embedded in data URLs: http://cssdeck.com/labs/simple-css3-3d-cube.

Fun, though with really ugly logos: http://thewebrocks.com/demos/3D-css-tester/.

A very recent example: http://www.creativebloq.com/3d/how-create-impressive-3d-graphics-css3-21410672.

Carousel

Not really a carousel, but close: http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/.

Repeating images, flat 2D: http://bradsknutson.com/blog/css-responsive-carousel/.

Not 3D, 'CSS only' but requires jQuery: https://www.mobify.com/mobifyjs/modules/carousel/.

A rare, unaswered question on SO: http://stackoverflow.com/questions/20572854/html-and-css-carousel.


Feedback: MartinRinehart at gmail dot com

# # #