CODEWITHSUNDEEP
csscss-transitionsbackground-color
Timothy D
Timothy D

Reputation: 155

CSS Background Transition - Gradient

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?

Upvotes: 3

Views: 1345

Answers (1)

Sven Bieder
Sven Bieder

Reputation: 5681

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.

Upvotes: 2

Related Questions