Walking man animation using only CSS3

http://andrew-hoyer.com/experiments/walking/

by clu3 • 15 years ago

175 32 15 years ago

james33• 15 years ago

Smooth as butter, love it!

mrpollo2• 15 years ago

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

jwilliams• 15 years ago

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

mrpollo2• 15 years ago

Thanks for that, i was starting to wonder why

mrhyperpenguin• 15 years ago

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

ndrwhr2• 15 years ago

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

happypeter• 15 years ago

Looks nice in my firefox, cool

americandesi333• 15 years ago

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

einai• 15 years ago

Works on my Firefox 7.0.1

unwind• 15 years ago

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

richbradshaw• 15 years ago

Firefox only got animations in v5.

bzbarsky• 15 years ago

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

mistermann• 15 years ago

Smooth on galaxy s2 stock browser as well.

gcanyon• 15 years ago

Easiest game of QWOP ever.

suyash• 15 years ago

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

PerryCox• 15 years ago

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

elii• 15 years ago

Surprisingly smooth on an iPhone 3GS

yaix• 15 years ago

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?

notatoad• 15 years ago

surprisingly, looks great on the stock android browser.

ehynds• 15 years ago

Everyone forgets about -o-animate :(

ashazar• 15 years ago

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!

jeffem• 15 years ago

I made something similar using only html:

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

ashamedlion• 15 years ago

Looks like you're mixing up CSS and HTML!

jamesu• 15 years ago

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)

Zakuzaa• 15 years ago

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

domlebo70• 15 years ago

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

smickie• 15 years ago

Not working in IE6.

Edit: It's a joke.

pak• 15 years ago

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

ndrwhr2• 15 years ago

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.

mkilling• 15 years ago

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.

KevinEldon• 15 years ago

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.

bitwize• 15 years ago

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

Walking man animation using only CSS3

Related Stories