So, I'm working on a design, and I was trying to apply a transition that would make the underline on the text links fade in and out, like I have done with a number of other properties. Here's the code I've written, maybe I just did something wrong? Code: #nav ul li a{ color:#3d240c; text-decoration: none; transition: text-decoration 3s ease-in; -webkit-transition: text-decoration 3s ease-in; -o-transition-: text-decoration 3s ease-in; -moz-transition-: text-decoration 3s ease-in; } #nav ul li a:hover{ text-decoration: underline; } Code: <div id="nav"> <ul> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Commissions</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div>
text-decoration isn't in the list of animatable properties at http://www.w3.org/TR/css3-transitions/ Although if it was something doesn't look right with the code you have. Shouldn't the transition code be in the a:hover style? where in the non hover style you have decoration set to none
