By admin on January 20th, 2015 in CSS3
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.
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; }
Here’s a breakdown of the values for the transition property:
Interested in additional transitions? Read more about the different types of transitions over at w3.org.
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