3

I can't for the life of me figure out why the transition property is not working in my css. Here's the code:

#header #menu-top-nav ul li a {
    -webkit-transition: background-color 10s;
    -moz-transition: background-color 10s;
    -ms-transition: background-color 10s;
    -o-transition: background-color 10s;
    transition: background-color 10s;
}
#header #menu-top-nav ul li a:hover {
    background: #dddddd; /* Old browsers */
    background: -moz-linear-gradient(top,  #dddddd 0%, #d3d3d3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #dddddd 0%,#d3d3d3 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #dddddd 0%,#d3d3d3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
}

The a tag background is technically transparent before hovering (though the ul it's contained within has a background gradient). But even if I assign the a tag a bg color or a gradient, the transition still doesn't work. I've tried putting the transition code in the a:hover style; I've tried changing the variable to background and to background-image with no success.

I have a lot more styles going on in my CSS, but I've been debugging in Chrome and can't find any conflicting culprit. I should mention that the transition property isn't working in any browser.

Can anyone help me out of what would appear to be a simple jam?

Timothy D
  • 155
  • 2
  • 13
  • 3
    You should see this answer http://stackoverflow.com/a/6542623/886539 – Simon Arnold Jan 15 '13 at 18:12
  • possible duplicate of [Use CSS3 transitions with gradient backgrounds](http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) – K-ballo Jan 15 '13 at 22:08

1 Answers1

2

A gradient is a background-image and not a background-color. So a transition of the background-color would have no effect on the gradient.

The transition of background-images is not supported so far.

Sven Bieder
  • 5,515
  • 2
  • 21
  • 27
  • Right. Thanks, Sven. I thought I had read that gradients were supported with `background-image`. Maybe that author was pining for a future spec. Hooray for workarounds. – Timothy D Jan 15 '13 at 18:22