TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Walking man animation using only CSS3

175 pointsby clu3over 13 years ago

19 comments

mkillingover 13 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.
评论 #3142791 未加载
suyashover 13 years ago
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
评论 #3139042 未加载
jamesuover 13 years ago
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)
smickieover 13 years ago
Not working in IE6.<p>Edit: It's a joke.
mistermannover 13 years ago
Smooth on galaxy s2 stock browser as well.
yaixover 13 years ago
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?
评论 #3139436 未加载
评论 #3138849 未加载
mrpolloover 13 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
评论 #3138562 未加载
ndrwhrover 13 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.
jeffemover 13 years ago
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>;
评论 #3138897 未加载
domlebo70over 13 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.
mrhyperpenguinover 13 years ago
It seems kind of verbose having to define all of the keyframes and such. Very cool nonetheless.
评论 #3140399 未加载
Zakuzaaover 13 years ago
One knee is displaced on ipad safari. Smooth otherwise though and pretty cool.
ashazarover 13 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 ;)<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!
gcanyonover 13 years ago
Easiest game of QWOP ever.
pakover 13 years ago
Anybody just get a severe jolt of the Uncanny Valley effect?
bitwizeover 13 years ago
Cool. Now do CSS-only QWOP. Challenge accepted?
eliiover 13 years ago
Surprisingly smooth on an iPhone 3GS
happypeterover 13 years ago
Looks nice in my firefox, cool
评论 #3138696 未加载
james33over 13 years ago
Smooth as butter, love it!