Do CSS3 Transitions Not Work With Text-Decoration?

[ronaldroe]

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?

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

<div id="nav">
	<ul>
		<li><a href="#">About</a></li>&nbsp;
		<li><a href="#">Portfolio</a></li>&nbsp;
		<li><a href="#">Commissions</a></li>&nbsp;
		<li><a href="#">Shop</a></li>&nbsp;
		<li><a href="#">Blog</a></li>&nbsp;
		<li><a href="#">Contact</a></li>&nbsp;
	</ul>
</div>

 

[DHDdirect]

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