CSS Background Transition - Gradient

Question

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?

You should see this answer stackoverflow.com/a/6542623/886539 — Simon Arnold
– Simon Arnold, Commented Jan 15, 2013 at 18:12
possible duplicate of Use CSS3 transitions with gradient backgrounds — K-ballo
– K-ballo, Commented Jan 15, 2013 at 22:08

Sven Bieder · Accepted Answer · 2013-01-15 18:15:49Z

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.

answered Jan 15, 2013 at 18:15

Sven Bieder

5,6912 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Timothy D Over a year ago

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.

Collectives™ on Stack Overflow

CSS Background Transition - Gradient

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related