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

Community · Accepted Answer · 2017-05-23 11:53:25Z

10

+25

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

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Jan 17, 2013 at 14:12

JNDPNT

7,4752 gold badges37 silver badges40 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:16:02Z

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, 2017 at 12:16

CommunityBot

11 silver badge

answered Jan 17, 2013 at 16:09

falidoro

3993 silver badges16 bronze badges

Comments

retrovertigo · Accepted Answer · 2013-01-23 02:27:38Z

3

The property background-image is not supported

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

answered Jan 23, 2013 at 2:27

retrovertigo

5979 silver badges22 bronze badges

Collectives™ on Stack Overflow

css transition on background image gradient

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related