Matt Lambert

Thanks to CSS3, Flash is getting more and more unnecessary. Can’t say I’m sorry, as I hate actionscript. In this tutorial I’ll show you how to create a fading link transition, on mouse over, with CSS3.

Live Demo

Here’s What the CSS Looks Like

First of all, we’re going to setup a regular link as we always would. Second, we’re going to use the transition property to add the fading.

a {
 color: #000;
 -webkit-transition: color 1s ease-in; /*safari and chrome */
 -o-transition: color 1s ease-in; /* opera */
}

a:hover { 
 color: #c00;
}

The Transition Property Explained

Here’s a breakdown of the values for the transition property:

1. The first value refers to property to be transitioned, in this case color
2. The second value controls the duration, in this case one second.
3. the third value controls the type of transition, in this case fade-in

Interested in additional transitions? Read more about the different types of transitions over at w3.org.

Fading Multiple Properties

It’s also important to note that you can have multiple transitions on the same selector. For example, if you want to to have your background and link colors both fade, you can do it. Simply break apart your properties, and list your declarations as I’ve done below. By the way, I’m setting up a new class for this demo called .multiple, and I’m only going to include the Safari (webkit) properties.

.multiple a {
 color: #000;
 background: #ccc;
 padding: 5px;
 -webkit-transition-property: color, background;
 -webkit-transition-duration: 1s, 1s;
 -webkit-transition-timing-function: linear, ease-in;
}

.multiple a:hover {
 color: #fff;
 background: #c00;
}

If you’re interested in learning more about CSS3, check out my eBook the CSS3 Handbook