All products featured on WIRED are independently selected by our editors. However, we may receive compensation from retailers and/or from purchases of products through these links.
Web developer Anthony Calzadilla has recreated the opening title sequence of AMC's Mad Men using only CSS 3 animations and some carefully crafted images. The result is an impressive showcase of what you can do with the animation powers available in CSS 3.
Head on over the official Mad Manimation demo and click the "Watch" link. Mad Manimation works well in WebKit browsers, including the iPhone. We also had no trouble watching it with Firefox's new Aurora channel release.
If you'd like to know how Calzadilla pulled it off (with help from Geri Coady and Andy Clarke), be sure to read his write up on the process behind the animation.
Calzadilla points out that the not-yet-released Animatable would have made the staging and animating process easier. Animatable looks impressive – an online IDE for CSS 3 animations – but sadly it's not available to the general public just yet. You can see a preview of the project in this video.
And just to head off the Flash fans who will note that they could have built the Mad Manimation demo in 1995 using only gotoAndPlay() and some duct tape, sure, we all know that, but the web has moved on.
See Also:
