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;           
}

score 10 · Accepted Answer · edited May 23 '17 at 11:53

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

score 6 · Answer 2 · edited May 23 '17 at 12:16

6

"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

edited May 23 '17 at 12:16

Community

1
1

answered Jan 17 '13 at 16:09

falidoro

399
3
14

score 3 · Answer 3 · answered Jan 23 '13 at 02:27

3

The property background-image is not supported

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

answered Jan 23 '13 at 02:27

retrovertigo

538
9
20

css transition on background image gradient

3 Answers3