Friday, February 5th, 2010

AT AT Walking with CSS

Category: CSS, Examples

Anthony Calzadilla has a fun Friday example for us. He has a tutorial on how he animated an AT AT using CSS.

He goes over the different areas and how he uses animation and transforms.

For example, the head of the beast:

  1. @-webkit-keyframes rotate-head{
  2.   0% {-webkit-transform:rotate(0deg) translate(0px,0px);}
  3.   40% {-webkit-transform:rotate(10deg) translate(15px,5px);}
  4.   80% {-webkit-transform:rotate(-5deg) translate(8px,5px);}
  5.   100% {-webkit-transform:rotate(0deg) translate(0px,0px);}
  6. }
  7. #atat #head {
  8.   -webkit-animation-name: rotate-head;
  9.   -webkit-animation-duration: 7s;
  10.   -webkit-animation-iteration-count: infinite;
  11.   -webkit-transform-origin: 0 50%;
  12. }

Posted by Dion Almaer at 6:17 am

3.3 rating from 27 votes


Comments feed TrackBack URI

Sweet, but in my opinion that’s not the job of CSS. Rather make layouts possible without those clumsy frameworks.

Comment by wortwart — February 5, 2010

More hotlinking fail? The image says “Click To View Demo”, but obviously you can’t click it .

Comment by FunWithSticks — February 5, 2010

That’s nothing! I animated 3 struggling sumo wrestlers for my company utilizing only CSS animations and a single image for the sprites! Take a look:

It also serves as a cute business card when I pull it up on my iPhone :)

Comment by jimjeffers — February 5, 2010

@wortwart – I agree, this is going way beyond the reason for CSS, it should be a stylesheet and not a scripting language

Comment by travisalmand — February 5, 2010

Is CSS really the right domain language to be doing animations in? This may be harsh, but the walk cycles in both examples look horrible. I would not hire a web designer to do animations, I would hire an animator who would definitely not be using CSS.

Comment by armaids — February 5, 2010

Nice job, but next I’d like to see Darth Maul spinning a double bladed lightsaber with a css matrix animation :)

Comment by someguynameddylan — February 5, 2010

I dig it, adds a nice touch to browsers that support it, and can still be pretty for those that don’t. Awesome job @AnthonyCalzadilla and @jimjeffers.

Comment by jdalton — February 5, 2010

I think the point in showcasing the power that CSS3 has evolved into is a very positive thing. Of course no-one in their right mind should be using it to this extent on commercial websites, but examples of what it can do, like this one, inspire new ideas for layout animations, and forces thinking outside the box.

Comment by Deminetix — February 5, 2010

@wortwart, @armaids – Agreed, CSS is really not the place for animations. It seems too limited in scope to do any good animation. I guess it could be hacked into doing more complex things using dynamic CSS, etc, but is IE ever going to support this? I doubt it. @jimjeffers – the sumo creations site looks like crap in IE, sorry. I guess it is fine if you ignore IE’s market share.

Also, this AT AT thing is pretty lame – the animation is crap, and it is so much more lame being shown on a fake iPad. I mean, if you want to show some cool CSS hacks, fine, but why douch-it-up with the iPad? Might as well add the ‘created on a macintosh’ tag line to complete it.

Comment by leptons — February 5, 2010

FunWithSticks, you must have Google Chrome to see this.

Comment by iRapid — February 5, 2010

@leptons ah good point. It needed the html5shiv script. The site works fine if you don’t have cssanimations you just get a static version delivered. Beats building a separate flash asset to accomplish a minor enhancement.

Comment by jimjeffers — February 6, 2010

CSS animations provide a medium for NATIVE animation support which is better then nudging an HTML Element a few pixels every few miliseconds through ES.
One can always use ECMAScript to control it and to establish legacy support.
It fits PERFECTLY in CSS, since CSS is intended for “presentation”.
Anyone that disagrees should really look into “seperation of concerns”.
For large scale animations, SVG and Canvas is around the corner (or here depending on the fact if legacy browser support and performance is important for you or not) which in essence is nothing more then yet another API (like the DOM) exposed to the ES sandbox.
Demo’s like these should be seen for what they are, to demo the extend and power of possibilities. How you use them is up to you, though debating wether or not it’s a good thing is ridiculous. Evolution and trend will decide on that, your our individual opinions matter not.

Comment by BenGerrissen — February 7, 2010

Leave a comment

You must be logged in to post a comment.