Star Wars Makes CSS3 Animations and Transformations Make Sense

atat-walker-css3Being a JavaScript guy, I was always uncomfortable with the whole idea of CSS animations. It’s an interesting experiment, but to me JavaScript is where your animation should be. That was until I found this AT-AT walker animation by Anthony Calzadilla.

Unfortunately, you’ll need a WebKit-based browser (Safari or Chrome, for example) to see it. So, sure it’s a WebKit proprietary CSS extension — the CSS3 animation and transformation modules are working drafts at the moment — but it’s always fun to experiment. And this experiment sure got me thinking.

But first, how is it done? Each part of the animation is separate; that is, the foot, shin, and thigh of each leg. CSS is then used to define the animation. Here’s the animation definition for the foot on Leg D, the front right one:

#atat #leg-d .leg-foot {
	-webkit-animation-name: foot-d;
	-webkit-animation-duration: 7s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50% 0;
}

It’s given a name, a duration (for how long the animation lasts), an iteration count (how many times the animation is run — infinitely in this case), and a position of origin. The next piece of the puzzle is the information for key frames:

@-webkit-keyframes foot-d {
  0% {
    -webkit-transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-20deg);
  }
  30% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

With the @-webkit-keyframe at-rule you define the style rules to apply at certain stages of the animation duration. Here we have apply rules at the start of the animation (0%), when it’s 10% through, 30% through, and then when it’s finished (100%). In the case of this example, the -webkit-transform declaration is used to apply a rotation, although any CSS property could be applied.

By applying different degrees of rotation, for different animated parts at different times during the animation sequence, the illusion is almost like puppetry.

There’s also an alternative syntax to use inside a @-webkit-keyframe block; you can specify to and from values like so:

@-webkit-keyframes fade-in {
  from {
    color: #fff
  }
  to {
    color: #000
  }
}

What do you think? To me it looks like a really straightforward syntax for describing animation. But you know what would be really cool? If a jQuery plugin was written that could read CSS3 animation syntax and execute the animation, making it cross-browser compatible.

Now that would rock.

You can read more about CSS3 animations on the WebKit blog.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • dusoft

    wonderful! hopefully, we will some of this in final version of CSS3 and won’t have to depend on proprietary extensions.

  • arts-multimedia

    Reinventing the wheel is an art on its own, so I do find this experiment very funny.
    I’m not planning to use css for animation myself because in my opinion, you do not use a screwdriver to cut your bread. In other words, use appropriate software for specialized tasks if you want to work efficiently. But I did enjoyed this experiment!

  • http://www.thedesignroom.net spoondevil

    My understanding would be…

    Surely this should’ve been created in JS or Flash seeing as far more people have these *plugins* than Safari or Chrome.

    If it makes it to a real world usable CSS, then fine, but this is just another reason that half of the Internet doesn’t work correctly if there are standards that aren’t adhered to.

  • http://codefisher.org/ codefisher

    I don’t like it! Just another type of animation that I will have to find the setting to disable. That is if Firefox supports it eventually. Which I hope not, it is just distracting, even if this example is extremely cool.

  • Chris Howard

    Nice proof of concept but, like any other complex CSS animation I’ve seen, they are murder on your CPU.

  • Magical1

    I am just curious to know …

    …How would you recommend marking something like this up for accessibility?

    Regards,

    Michael

  • http://www.lunadesign.org awasson

    Well that is fascinating!

    Sure it uses a few more cycles than a static page but I did a little reviewing and it seems to take about the same amount of processor cycles as refreshing a page at most and the largest hit is when starting up the animation so I suspect a great deal of it is used during loading up the the html & css.

    It will be interesting to see if any of this becomes cross browser compliant or if a jQuery plugin is created… It could open doors for new and interesting game development for developers more in tune with CSS markup.

    Gotta love the web where the only constant is change : )

  • NetNerd85

    arts-multimedia said:

    I’m not planning to use css for animation myself because in my opinion, you do not use a screwdriver to cut your bread. In other words, use appropriate software for specialized tasks if you want to work efficiently.

    I completely agree! As a CSS guru the thought of using it for animation is beyond dumbass. Why? Because you can? You can use JavaScript or ActionScript because that is what they are there for. Please don’t use CSS for animation, it is a STYLING language. Not content generation, not animation, not image generation but simple HTML element styling. Create a new markup or styling language for any other ideas, please!

  • Nathan

    Seriously?

    What’s the point when the tools for animating things already exist in JS or Flash etc.. which are already heavily used and stable?

    This is just sad and pointless, what a waist of resources…

  • http://codefisher.org/ codefisher

    After seeing this example of what can be done with CSS animation, I am actually thinking this would be really cool to have, and will take back my comments above. Being able to disable JS, but still be able to get a lot of cool effects is great.

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    Well, comments suggesting this is a waste of time for whatever reason, are just plain silly. It’s an experiment and nothing more. When you’re experimenting and having fun, nothing needs to have a purpose or even be useful. The goal can simply be, lets see how far we can push the envelope.

    If people stopped experimenting and playing with technology like this, we’d be at a standstill and nothing would ever change. Maybe some people would like nothing to change, but I’m certainly not among them.