Walking man animation using only CSS3

I have been downvoted for saying something along the lines of this before, but: I am extremely frustrated with all those CSS3 and WebGL demos on HN. I have yet to see anything that wasn't possible 10 years ago as a native app or as a Flash program. There have been at least 10 of those demos on the front page in the past few months. It's enough.

Do this to mess with it and enjoy:<p>inspect element and go to div class="me" and increase the time: .me, .me div {<p>-webkit-animation-duration: 20000ms; } Optional music: <a href="http://www.youtube.com/watch?v=BumcoxotNb0" rel="nofollow">http://www.youtube.com/watch?v=BumcoxotNb0</a> It looks much better

A long while ago i did something similar, exporting an animated scene from blender ( <a href="http://www.cuppadev.co.uk/wp-content/uploads/2009/12/walk.html" rel="nofollow">http://www.cuppadev.co.uk/wp-content/uploads/2009/12/walk.ht...</a> ).<p>For reference, the script i made: <a href="https://github.com/jamesu/csstransformexport" rel="nofollow">https://github.com/jamesu/csstransformexport</a> (note: not compatible with v2.5)

Not working in IE6.<p>Edit: It's a joke.

Smooth on galaxy s2 stock browser as well.

Nice, looks great on Android/FF. As expected, does not work on Android/Opera.<p>Should the shadow expand and shrink with the movement of the legs?

Runs better on Safari 5.1.1 for me, than Chrome 15.0.874.100 beta and latest Aurora on Lion, MBP 2009 15", it runs very smooth

Thanks everyone! For those talking about browser support, the experiment is coded to only work on Webkit and Firefox browsers. Perhaps shortly I will add the -o and -ie prefixes as it seems other browsers are starting to catch up with their CSS implementations.

I made something similar using only html:<p>&#60;img src="<a href="http://www.mysite.joke/walkingman.gif&#62" rel="nofollow">http://www.mysite.joke/walkingman.gif&#62</a>;

Looks great Andrew. Also thanks for helping me with my Cloth Simulation when I emailed you a year or two ago. Really appreciated that.

It seems kind of verbose having to define all of the keyframes and such. Very cool nonetheless.

One knee is displaced on ipad safari. Smooth otherwise though and pretty cool.

Very well done Andrew. It works perfectly on my iPhone 3gs and on desktop with Chrome. Seems like Flash will be dead soon ;)<p>The only thing that bothers me is the legs. They go forward a little, but to the back a lot. And that seems un-natural to me.<p>Congrats!

Easiest game of QWOP ever.

Anybody just get a severe jolt of the Uncanny Valley effect?

Cool. Now do CSS-only QWOP. Challenge accepted?

Surprisingly smooth on an iPhone 3GS

Looks nice in my firefox, cool

Smooth as butter, love it!