WP-Mix

CSS transitions can add a nice effect to links. Here are some quick example snippets for your copy/paste enjoyment.

transition syntax

CSS3 transition property is widely supported, with the exception of Webkit and Opera Mini. Fortunately, it’s possible to apply transitions to those browsers as well using custom vendor prefixes. Before the examples, here is the basic syntax for CSS transition:

selector { transition: property duration timing-function delay; }

• transition-property — name of animated property (eg, color)
• transition-duration — duration of animation (in seconds or milliseconds)
• transition-timing-function — animation speed curve (eg, ease, ease-out)
• transition-delay — duration of animation delay (s or ms)

Vendor prefixes are used in the following examples to provide support for older browsers. All prefixes except -webkit- may be removed if you’re only supporting current versions (i.e., progressive enhancement).

Animate link colors

Animate link colors:

a, a:link, a:active, a:visited {
 	transition: color 0.25s ease-out; 
	-webkit-transition: color 0.25s ease-out; 
	-moz-transition: color 0.25s ease-out; 
	-o-transition: color 0.25s ease-out;
	color: #cc3c09; 
	}

Animate link background colors

Animate link background colors:

a, a:link, a:active, a:visited {
 	transition: background-color 0.25s ease-out; 
	-webkit-transition: background-color 0.25s ease-out; 
	-moz-transition: background-color 0.25s ease-out; 
	-o-transition: background-color 0.25s ease-out;
	background-color: #cc3c09; 
	}

Animate color and background-color

Animate color and background-color:

a, a:link, a:active, a:visited {
 	transition: background-color 0.25s ease-out; 
	-webkit-transition: background-color 0.25s ease-out; 
	-moz-transition: background-color 0.25s ease-out; 
	-o-transition: background-color 0.25s ease-out;
	background-color: #cc3c09;

	transition: color 0.25s ease-out; 
	-webkit-transition: color 0.25s ease-out; 
	-moz-transition: color 0.25s ease-out; 
	-o-transition: color 0.25s ease-out;
	color: #cc3c09; 
	}

More transition/animation examples

Check out the CSS transition examples at Perishable Press for some advanced techniques :)