Walking man animation using only CSS3 | Hacker News Reader

Walking man animation using only CSS3

andrew-hoyer.com

175 pointsclu332 comments

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.

The demos have shown me how powerful CSS3 (and CSS2 before it) is. My take away is that CSS3 is very powerful and can provide a user experience that could replace what could only be done in native apps and proprietary plugins before. The demos similar to the posts about running a Linux instance on top of JavaScript in your browser, or whatever new language has the greatest new features or libraries... they may not be immediately practical, but they keep me informed about the state of the art.

Do this to mess with it and enjoy:

inspect element and go to div class="me" and increase the time: .me, .me div {

-webkit-animation-duration: 20000ms; } Optional music: http://www.youtube.com/watch?v=BumcoxotNb0 It looks much better

I've found that I prefer it to be around 500ms :)

A long while ago i did something similar, exporting an animated scene from blender ( http://www.cuppadev.co.uk/wp-content/uploads/2009/12/walk.ht... ).

For reference, the script i made: https://github.com/jamesu/csstransformexport (note: not compatible with v2.5)

Not working in IE6.

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.

Should the shadow expand and shrink with the movement of the legs?

surprisingly, looks great on the stock android browser.

Everyone forgets about -o-animate :(

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

Safari is hardware accelerated - so a lot of the more advanced CSS effects will generally be faster.

Thanks for that, i was starting to wonder why

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:

<img src="http://www.mysite.joke/walkingman.gif>;

Looks like you're mixing up CSS and HTML!

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.

Agreed. I can tell you it was quite tedious to write and would definitely not recommend this approach for anything practical.

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 ;)

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.

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

Thats strange, its not working on my Firefox version 4.0.1. Otherwise great on Chrome and Safari

Works on my Firefox 7.0.1

It says, right at the top, that it requires at least Firefox 5.

Firefox only got animations in v5.

May I strongly suggest updating to a not-insecure version of Firefox?

Smooth as butter, love it!

Reply on news.ycombinator.com