Animation How to - Highlight link with CSS3 Fading Link Transition

Question

We would like to know how to highlight link with CSS3 Fading Link Transition.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a {<!-- w  w w.  j a va  2 s .  co  m-->
     color: #000;
     -webkit-transition: color 1s ease-in; /*safari and chrome */
     -moz-transition: color 1s ease-in; /* firefox */
     -o-transition: color 1s ease-in; /* opera */
}
a:hover { 
     color: red;
}
.multiple a {
     color: #000;
     background: #ccc;
     padding: 5px;
     -webkit-transition-property: color, background;
     -webkit-transition-duration: 2s, 2s;
     -webkit-transition-timing-function: linear, ease-in;
}
.multiple a:hover {
     color: #fff;
     background: #c00;
}
</style>
</head>
<body>
  <p><a href="#">This is a link</a></p>
  <div class="multiple"><a href="#">Link with Multiple Transitions</a></div>
</body>
</html>

The code above is rendered as follows: