Wednesday, May 2, 2012

Slim Up Your JavaScript with CSS3 - Animation

When I was a kid, every Saturday I'd get my bowl of sweet cereal and plop down in front of the TV, ready for an action packed morning of cartoons! While I won't be using CSS to animate any Saturday morning entertainment, I was delighted to discover some sweetness built into the CSS3 working draft that'll bring those static elements to life!

Last time, I explored some basic animations called Transitions, which we used to get a button to slowly glow. But this time, I'm looking into the more advanced animation capabilities of CSS3, which gives a lot more control!

How this stuff works

The basis of animation in CSS3 – and basically all other computer-based animation, for that matter – is interpolation. Interpolation basically just means that, given a starting value and an ending value, the values for every point in time in between those two can be determined. So we tell it our starting CSS property, our ending property, and how long we want the animation to last, and the computer will figure out everything in between. That's good news for us because, hey, we've got better things to do with our time, like writing blog posts, and eating bacon.

CSS3 Animation Interpolation

Now the Transition example was simple, because there were only two values to use when interpolating -- the start value and the end value. But in CSS Animation, we can specify any number of values between the starting and ending value. These points are called keyframes. So instead of just going from width: 150px; to width: 200px;, we could specify multiple keyframes in between in order to make the element appear to bounce. And that's exactly what we're going to do!

CSS3 Animation Timeline

Like last time, we've got a few caveats to keep in mind:

  • The CSS3 Animation spec is still in Working Draft status. That means we've gotta use those delightful browser prefixes on the property names. And of course, it also means that things are subject to change.
  • It'll be pretty lightweight on the JavaScript side, but it still needs a little glue. We're going to use some jQuery to wire up the events we need.
  • Internet Explorer ain't gonna do much for ya.

Check out the demo

OK, hover over this image in Firefox or WebKit. Go ahead, don't be shy!

You're addicted to mousing over it now, aren't you? C'mon, admit it!

Code Time!

OK, gird up your loins! It's time to Hit the Bits!

Now, in order to keep the code easy to read, I'm only showing the properties for WebKit. (Chrome had more page hits on this site than Firefox last month!) If you're using Firefox, just use the -moz prefix instead of the -webkit prefix.

The magic here is mostly in the keyframes. Unlike the Transition we did last time, here we're specifying not two but five keyframes. By changing the background-size property from 150px to 210px to 190px to 205px to 200px, it makes the image appear to bounce into the new size.

Break it down!

  • We've declared animation keyframes for two animations -- bounce-up and bounce-down.
  • The percentage number indicates how far along the timeline that keyframe is to be positioned, and the properties inside the braces for each keyframe are the values.
  • The animation is actually triggered by specifying the animation-name property.
  • And finally, I used animation-fill-mode of "forward" so that the element doesn't revert to its initial CSS properties when the animation completes.

As you can see, this is pretty minimal on JavaScript. In fact, it's almost entirely declarative! Personally, I don't like to muddle up the JavaScript code with animation concerns, because animation is presentation stuff, not behavior stuff.

So, what do you think? Cooler than anigifs?

Well, that's all for this one. Meanwhile, if you haven't circled me on Google Plus yet, you totally should. I'm also just getting this twitter bird off the ground, so feel free to follow me @djleeds.

Related Stuff

No comments:

Post a Comment

Profile Picture
Dave Leeds
My Hobbies:
  • Programming
  • Cartooning
  • Music Writing
Full Profile