Servage Magazine

We’ve seen CSS used for visual effects like rounded corners, color gradients, and drop shadows that previously had to be created with graphics. In this article, we’ll look at some CSS3 properties for producing animated interactive effects that were previously only possible with Flash or JavaScript.

We’ll start with CSS Transitions, a nifty way to make style changes fade smoothly from one to another. Then we’ll discuss CSS Transforms for repositioning, scaling, rotating, and skewing elements and look at how you can animate them with transitions. I’m going to close out the article with brief introductions to 3D Transforms and CSS Animation, which are important to know about but are too vast a topic to cover here, so I’ll give you just a taste.

CSS Transitions

Picture in your mind, if you will, a link in a navigation menu that changes from blue to red when the mouse hovers over it. The background is blue… mouse passes over it…BAM! Red! It goes from state to state instantly, with no states in between. Now imagine putting your mouse over the link and the background gradually changes from blue to red, passing through several shades of purple on the way. It’s smoooooth. And when you remove the mouse, it fades back down to blue again.

That’s what CSS Transitions do. They smooth out otherwise abrupt changes from state to state over time by filling in the frames in between. Animators call that tweening. When used subtly and with reserve, they can add sophistication and polish to your interface and make them more pleasing to use.

CSS Transitions were originally developed by the Webkit team for the Safari browser, but they are now a Working Draft at the W3C. As of this writing, the set of transition properties are still pretty cutting edge and the specification is likely to change, so all browsers that support them require their respective browser prefixes. They have good support (with prefixes) on iOS, Android, and Opera mobile browsers as well.

The only browser versions that do not support transitions at all are Internet Explorer 9 and earlier, Firefox 3.6 and earlier, and Opera 10.1 and earlier. But if you use transitions for progressive enhancement, it shouldn’t matter too much that users of those browsers won’t see the effects. For those folks, snapping directly from blue to red is not a big deal.

Transition basics

Transitions are a lot of fun, so let’s give them a whirl. When applying a transition, there are a few decisions to make, each of which is set with a CSS property:

• Which CSS property to change (transition-property)

• How long it should take (transition-duration)

• The manner in which the transition accelerates (transition-timingfunction)

• Whether there should be a pause before it starts (transition-delay)

You also need something to trigger the transition. A state change such as :hover, :focus, or :active makes a good trigger, and that’s what we’ll be using for the examples in this chapter. You could use JavaScript to change the element (such as adding a class attribute) and use that as a transition trigger as well.

Sources for further reading

• Smashing Magazine
• W3 Schools