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

    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{
    	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">
    		<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;
    Last edited: Mar 1, 2011
  2. DHDdirect

    DHDdirect New Member

    text-decoration isn't in the list of animatable properties at

    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