css transition on background image gradient

Question

I have a background image in my css3 with image and gradient defined. I also want to have a transition when class changes from on_time -> too_late or vise versa.

I cannot get the transition on the gradient. Is this somehow supported in css3?

Thanks

div.too_late
{
    color: White;        
    background-image: url(../Content/images/uit_white.png), -webkit-linear-gradient(top, #feb233 0%, #f39801 100%);       

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;    
}

div.on_time
{
    color: #222;        
    background-image: url(../Content/images/uit_black.png), -webkit-linear-gradient(top, yellow 0%, #99ff33 100%);    

    -webkit-transition-property: background-image, color; 
    -webkit-transition-duration: 5s;           
}

Answer 1

It's not possible to have transitions on background gradients. But you can have a look at this link to make it work with "hacks": http://nimbupani.com/some-css-transition-hacks.html

You can also make it appear like it's changing by using the background-position shift: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Here is a similar question with more links and information btw: Use CSS3 transitions with gradient backgrounds

Answer 2

"Gradients don't support transitions yet (although the spec says they should). If you want a fade-in effect with a background gradient, you have to set an opacity on the container and transition the opacity."

Source: Use CSS3 transitions with gradient backgrounds

Answer 3

The property background-image is not supported

http://www.w3.org/TR/css3-transitions/#animatable-css