Did you know? DZone has great portals for Python, Cloud, NoSQL, and HTML5!
HTML5 Zone is brought to you in partnership with:

Mitch Pronschinske is the Senior Content Curator (aka. "Lord of the Zones") at DZone. That means he writes and searches for the finest developer content in the land so that you don't have to. He often has hotdogs for lunch, likes to make his own ringtones, enjoys card and board games, and is married to an underwear model. Mitch is a DZone employee and has posted 1710 posts at DZone. You can read more from them at their website. View Full User Profile

Walking Developer Animation in Pure CSS3

10.21.2011
Email
Views: 2138
  • submit to reddit
The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards.  Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter.

It's really astonishing the things that web developers can do today working with nothing but CSS3.  Andrew Hoyer took it to a whole 'nother level today with a CSS animation of himself walking (and fun signs in the background).  You can see a pic I took below. 
Hoyer was also kind enough to write a nice article on how he did it:

I threw around ideas of doing some kind of chaotic pendulum, or maybe a cleaner implementation of the robotic arm. The idea of doing the arm again, reminded me of the CSS3 AT-AT I saw a while ago. I remembered the first time I saw it, thinking, “This is incredible”, before realizing just how limited the animation was. I thought maybe I could take it further and create something a little more extreme.  --Andrew Hoyer

 



Check out the video too:



Full code snippets and explanation can be found on his blog through the reference box below.
References
Tags:

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins.  Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards.  This Microzone is supported by Microsoft, and it will delve into the intricacies of using these new web technologies and teach you how to make your websites compatible with all of the modern browsers.