CODEWITHSUNDEEP
csscss-transitions
JBarnes
JBarnes

Reputation: 59

CSS Transition only working on some elements

I have a menu in which each anchor should do a simple color fade transition when hovered over. The thing is that only one of the anchor elements is doing it (in this case, only the 'twitter' link) in Chrome v16.0.912.75 and none of the elements are transitioning in IE9 (Firefox 8.0.1 works OK). I have rotated the order of the links and have removed the 'last' class from the 'twitter' link with no results.

There's not much to this so I'm not sure why it isn't working. 

#menu_left a{
    display:block;
    width:100px;
    height:30px;
    margin:10px auto;
    font:18px bold;
    text-decoration:none;
    border-bottom:1px dotted #e69b8d;
    -webkit-transition: 0.25s ease-in;
    -moz-transition: 0.25s ease-in;
    transition: 0.25s ease-in;
    }
#menu_left a.last{border-bottom:none;}
#menu_left a:hover{
    color:#ed9887;
    transition: 0.25s ease-out;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    }    

<div id="menu_left">
    <a href="/">home</a>
    <a href="/gallery/">gallery</a>
    <a href="/contact/">contact us</a>
    <a href="http://www.facebook.com">facebook</a>
    <a href="http://www.twitter.com" class="last">twitter</a>
</div>

You can see the working at http://events.bridalflowersexclusive.com. Thanks in advance for your time.

Upvotes: 0

Views: 765

Answers (2)

khollenbeck
khollenbeck

Reputation: 16157

Check out the browser support on this link. You may want to look for a JavaScript / JavaScript framework solution?

http://www.w3schools.com/css3/css3_transitions.asp

Upvotes: 0

methodofaction
methodofaction

Reputation: 72465

IE9 doesn't support CSS transitions, Webkit has a bug that prevents :visited links from being animated.

Upvotes: 1

Related Questions