Final Effect

Just so you can get a feel for where we are headed, here’s a demo of the final effect.
screenshot
screenshot
As you can see, we’re utilizing Webkit CSS3 transitions to change the background color, text color, link color and hover link color to add some life to an otherwise simple web page. As you move your mouse into the rectangle, the background, text color and link color change. Then hovering over a link will trigger another color transition for the link text.
We’ll have to stick to Webkit on this one as Firefox transitions are still forthcoming (look for -moz-transition in Firefox 3.7).

CSS3 Transitions

Before we begin, let’s take a look at the basic syntax of the CSS3 transitions we’ll be using. Basically, Webkit transitions work by specifying three items: the property to be transitioned, the duration of the transition, and the timing function. Here’s an example.


In the example above, we’ve chosen to transition the color in a linear fashion over a period of one second. The timing function controls the speed of the change over the duration of the transition. Choosing linear keeps the rate of change steady while choosing ease-in will slightly speed up the transition as it progresses. For a detailed explanation of the timing function options, check out Webkit.org’s article on CSS Animation.
The example above only selected a single property to transition but we can also choose to transition multiple properties in a single command. Consider the following:


This example selects both the text color and the background color (separated by commas) for a one second transition. The timing function for the “color” property is linear while the “background” property is assigned the ease-in function.
To learn more about this example, check out the NetTuts article on CSS3 transitions.

Getting Started: The HTML

The first thing we’ll do is throw down a basic blank XHTML template (we could’ve just as easily used HTML5 but I decided to focus on one new technology at a time).


After you’ve got your empty template hashed out, add a single div to hold the text. Type whatever you want in this area, just be sure to add some links so you can get the full effect of the transitions.


That’s it! As I said before, we are building an extremely simple example so that’s all the HTML you’ll need. I gave the div a class instead of an id so you can easily add other areas to the page that will carry over this functionality.

Basic CSS

The HTML has only yielded a single, boring paragraph at this point so we’ll rely heavily on CSS to make the page more attractive.
To start off, we’ll add some basic styling directly to the body.


Here we’ve set some basic styles for the background, the text container and the links in the text container. We gave the background a really dark gray color, made the text white and used Chris Coyier’s Better Helvetica snippet to give us some nice thin text.
Lastly, we’ve styled the links so that they are a light gray and have no text decoration. Here’s what you should have at this point:
screenshot
Next we’ll expand the textContainer section by giving it a thin border and aligning it with the center of the page. This last part (centering it all on the page) is accomplished by giving the div a width and setting the margin to auto. Make sure you center align the text as well so it’s not hanging out at the left side of the div.


This should give you the basic look you saw in the demo.
screenshot

Adding The Magic

Now that we’ve got our page basically styled, we want to add a few color transitions to liven things up. The first place we’ll want to throw in a transition is in the main textContainer. We’ll use the same code that we saw in the explanation of CSS3 transitions above.


This will set a transition on any change we make to the “color” or “background” properties, using a one second transition and two different timing functions: linear and ease-in respectively.
Next we’ll set a transition to the link text so that any change we make to this color will trigger a second transition.


As stated above, this code by itself won’t do anything. It sort of just keeps an eye out for any changes to the specified properties. When a change does occur due to other CSS commands, it will transition it with these settings.

The Catalyst

When setting up transitions, you need an event to trigger the transition. In CSS, one of the easiest and most common events to work with is a hover event. Though hover events are most commonly applied to links (which we’ll do), we’ll also apply one simply to the div as a whole so that as the mouse enters, the transition is triggered.
Since we’ve already setup the transition commands, the hover events are really easy and only utilize a few lines of code to change the colors around. First we’ll tackle the div hover event.


This will make it so that when someone’s cursor enters the div, the text color will change to dark gray and the background will change to white. However, our link colors are currently staying the same gray as they were before the hover event. Add the following code to change this.


This sets it so that when a hover event occurs in the .textContainer, all links will change to a light blue. Finally, we want to set color of the light blue text to darken gradually as you hover over it.


Note that there is a big difference between .textContainer:hover a and .textContainer a:hover. The former affects the link color when your mouse enters anywhere into the div and the latter affects the link color when you hover the links only.
That finishes up our CSS as well. Now when you enter the div with your mouse, the background should gradually fade to white, the text should turn dark gray and the links should become light blue. Then when you hover over a link it should gradually become darker.
screenshot

Conclusion

I hope this article has sparked a few ideas in your own head for some fun things to do with CSS transitions. Let me know in the comments below what you thought of the overall effect and how you’d improve it. Also be sure to share any links you have to other CSS3 transition examples.