9 ms·
Walking man animation using only CSS3
- james33 15y agoSmooth as butter, love it!
- mrpollo 15y agoRuns 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
- mrhyperpenguin 15y agoIt seems kind of verbose having to define all of the keyframes and such. Very cool nonetheless.
- ndrwhr 15y agoAgreed. I can tell you it was quite tedious to write and would definitely not recommend this approach for anything practical.
- happypeter 15y agoLooks nice in my firefox, cool
- americandesi333 15y agoThats strange, its not working on my Firefox version 4.0.1. Otherwise great on Chrome and Safari
- einai 15y agoWorks on my Firefox 7.0.1
- unwind 15y agoIt says, right at the top, that it requires at least Firefox 5.
- richbradshaw 15y agoFirefox only got animations in v5.
- bzbarsky 15y agoMay I strongly suggest updating to a not-insecure version of Firefox?
- mistermann 15y agoSmooth on galaxy s2 stock browser as well.
- gcanyon 15y agoEasiest game of QWOP ever.
- suyash 15y agoDo 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 http://www.youtube.com/watch?v=BumcoxotNb0 It looks much better
- PerryCox 15y agoI've found that I prefer it to be around 500ms :)
- elii 15y agoSurprisingly smooth on an iPhone 3GS
- yaix 15y agoNice, 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?
- ashazar 15y agoVery 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 15y agoI made something similar using only html: <img src="http://www.mysite.joke/walkingman.gif> http://www.mysite.joke/walkingman.gif>
- ashamedlion 15y agoLooks like you're mixing up CSS and HTML!
- jamesu 15y agoA long while ago i did something similar, exporting an animated scene from blender ( http://www.cuppadev.co.uk/wp-content/uploads/2009/12/walk.html http://www.cuppadev.co.uk/wp-content/uploads/2009/12/walk.ht... ). For reference, the script i made: https://github.com/jamesu/csstransformexport https://github.com/jamesu/csstransformexport (note: not compatible with v2.5)
- Zakuzaa 15y agoOne knee is displaced on ipad safari. Smooth otherwise though and pretty cool.
- domlebo70 15y agoLooks great Andrew. Also thanks for helping me with my Cloth Simulation when I emailed you a year or two ago. Really appreciated that.
- smickie 15y agoNot working in IE6. Edit: It's a joke.
- pak 15y agoAnybody just get a severe jolt of the Uncanny Valley effect?
- ndrwhr 15y agoThanks 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 15y agoI 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 15y agoThe 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 15y agoCool. Now do CSS-only QWOP. Challenge accepted?