Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

Creating a Fading Link Transition with CSS3

March 1st, 2010

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.

Browser Support

Currently, these styles are only supported by Safari, Chrome, and Opera (PC only).

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;
}

Make sure you check out the Cardeo Minimal HTML Email Template.

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;
}

Here’s What it Looks Like

Check out the live demo to see the transition in action. Otherwise, feel free to download the source files and play around with them.

Tags: css3, fade, link, transition