Do CSS3 Transitions Not Work With Text-Decoration?

Discussion in 'Web Design' started by ronaldroe, Mar 1, 2011.

to remove all ads.
  1. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    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>&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>
     
    Last edited: Mar 1, 2011
  2. DHDdirect

    DHDdirect New Member

    Messages:
    383
    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
     

Share This Page