

Walking man animation using only CSS3 - clu3
http://andrew-hoyer.com/experiments/walking/

======
mkilling
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
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.

------
suyash
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
I've found that I prefer it to be around 500ms :)

------
jamesu
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...](http://www.cuppadev.co.uk/wp-
content/uploads/2009/12/walk.html) ).

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

------
smickie
Not working in IE6.

Edit: It's a joke.

------
mistermann
Smooth on galaxy s2 stock browser as well.

------
yaix
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?

~~~
ehynds
Everyone forgets about -o-animate :(

------
mrpollo
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
Safari is hardware accelerated - so a lot of the more advanced CSS effects
will generally be faster.

~~~
mrpollo
Thanks for that, i was starting to wonder why

------
ndrwhr
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.

------
jeffem
I made something similar using only html:

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

~~~
ashamedlion
Looks like you're mixing up CSS and HTML!

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

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

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

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

------
ashazar
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!

------
gcanyon
Easiest game of QWOP ever.

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

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

------
elii
Surprisingly smooth on an iPhone 3GS

------
happypeter
Looks nice in my firefox, cool

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

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

------
james33
Smooth as butter, love it!

