Walking with CSS3
October 26, 2010
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
Using only CSS3 and very basic HTML, I constructed a simple man (myself) and made it walk. Works only in webkit browsers (beautifully in mobile safari).
Read more here:
http:/andrew-hoyer.com/blog/2010/10/21/walking/
Technology:
CSS3 and HTML
Comments
yes
Reply to this commentso cool ! 惊叹挖~~~ 原理简单，要拼起来不容易
Reply to this commentSuperb, thnx 4 sharing
Reply to this commentIts like ActionScript.. Look for the: (at-sign) - web kit - k e y f r a m e s (no spaces) You will notice perc. signs with 0 up to 100. Browser it interpolates along the timeline between key frames. Or so I gather.
Reply to this commentWell, they are based off of the same language...
Reply to this commentachei muito interessante,as opçoes oferecidas,,quero ter acesso
Reply to this commentadress
Reply to this commentgood
Reply to this commentSUPER COOLL
Reply to this commentNice Demo. Works on ARCHOS Android tablet too.
Reply to this commentI see many rotating div s all over the place.
Reply to this commentVery Nice & Interesting But its a real video of a person and you transparent the video?
Reply to this commentgostaria de intalar
Reply to this commentReally nice! Great job :)
Reply to this commentWorks great on Firefox 4b
Reply to this commentmaas
Reply to this commentI don't really undestand how this is possible as I'm only using -webkit css properties... but hey, thats great news I guess.
Reply to this commentNo doesn't work.
I don´t understand the point of this experiment... :S
Reply to this commentThe point is that it is doing non-trivial animation using only css (styling). There is no code making the guy walk.
Reply to this commentNo javascript. CSS and HTML are forms of code. So are sql queries. Likewise entering spreadsheet formulas is a form of programming. Still, its great! The more power there is in CSS3 the more powerful the DOM for javascript to control.
You should extend this so that it's personalized!
Reply to this commentNice, I like this a lot, well done :)
Reply to this commentEh, only impressive if you don't know about css3 animation. Otherwise, this is a pretty standard use of it. The animation itself is really boring - you ought to do something more interesting to show its true power
Reply to this commentPerfect, even on iPad it so smooth!
Reply to this commentFIRST!!where is the code that actually moves the divs, the only stylesheets i see don't do anything like that (main and pigments)
Reply to this commentThere isn't any code really to this. it's ALL css and html. To see the "code" (read: styling), check out the bottom of my blog post about it, or just view the source of the page. It's all right there on the page. No tricks.
Reply to this commenti know how it works, but i cant fine a '-webkit-animation' rule anywhere.