Slim Up Your JavaScript with CSS3 - Transitions

As I've been learning about CSS3, I've been particularly interested in the ways that it can help keep my HTML lean and clean. But I was surprised to learn that CSS3 doesn't only tidy up your markup -- it can also eliminate the need for presentation-related JavaScript code! Let's take a look...

What kinda transitions are we talkin' about?

Most websites these days don't just update when you click a link or submit a form. They also update when you interact with the page itself. One of the most common examples is the mouseover. (We used to call them "rollovers", but since mice these days are optical, there's nothing inside actually rolling. And that's good news because back in the day, those balls would always collect all sorts of weird gunk. Anyone else remember that?) Anyhow, when you move the mouse over a button, it's not unusual to see it get highlighted in some way. Usually this is accomplished using the :hover pseudo-selector.

Since the advent of more advanced JavaScript libraries, such as Scriptaculous and jQuery, you can do some pretty cool animations on DOM elements. But CSS3 builds in some neat ways to pull off certain types of animations without having to reference a single JavaScript file.

The simplest CSS3 animation technique is called a transition, and it allows you to animate many CSS properties by just specifying two rules. When the element changes from one rule to another (for example, when you hover over an element that has a :hover rule), that normally immediately triggers the new rule. But with CSS3, you can optionally tell it to slowly interpolate the values over time.

A quick caveat -- the CSS3 Transitions Module is still in "Working Draft" status, so browsers out there are still using their prefixes (e.g., -moz, -webkit, etc) for these properties, which means we'll have to specify the same value for each browser-specific property. And don't expect any lovin' from IE.

Show me the code!

OK, let's hit the bits! We're going to create a snazzy looking CSS3 button, and make it slowly glow when we hover over it. Let's look at the CSS (and a dash o' HTML):

And here's the live demo. Hover over the button and watch it glow!

Hit the Bits!

One line of HTML and no JavaScript. Not bad!

So, how's that work?

Here we specified two CSS rules -- both apply to the same div, but one adds the :hover pseudo-selector. The browser knows to animate the CSS properties when it sees the transition-duration property (and their browser-specific equivalents). Here I set it to 0.5 seconds, so it animates from the first CSS rule to the second over the course of 0.5 seconds, interpolating the values for background-color, text-shadow, and box-shadow.

What else can it do?

If you've done animation in Flash, you're probably wondering how to specify non-linear interpolation. CSS3 provides some handy timing presets, such as ease-in, ease-out, ease-in-out. And if you're a total control freak, you can even specify cubic bezier curves!

Also, if you want to animate only some of the properties, you can specify which ones using transition-property. By default, it'll animate all properties that are actually capable of being animated. (Good luck trying to animate a change of font-family...)

And, you can also specify a delay if you don't want to start the animation immediately. That's great for... um... making your site feel unresponsive...?

Finally, my example above uses no JavaScript at all. But imagine how easy it'd be to combine CSS3 transitions with JavaScript! You can use JavaScript to set classes on elements, which trigger the animations. It cleanly keeps behavioral concerns in JavaScript, and presentation concerns in CSS. Nice.