CODEWITHSUNDEEP
csscss-transitions
hh54188
hh54188

Reputation: 15656

CSS3:transition does't work when the background color is gradient

I have prepared two style of body, all of their background is gradient, also I add transition effect to the tag:

body{
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
    -webkit-transition: all 1s linear 0s;
}

body.orange{
    background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.7), rgba(35, 35, 35, 1) 60%);
}

I use button to toggle between the two style.The problem is the style toggle have no transition effect.

But when I set the background color to pure color,like "red" or "black", the transition effect show again.

Here is the demo

Why this happened?How can I make gradient background color toggle also have transition effect?

Upvotes: 0

Views: 264

Answers (1)

Raymond Chen
Raymond Chen

Reputation: 45172

The CSS Transitions specification says that the color of a background can animate but gradient is classified as image.

If you want to get a gradient transition effect you will have to fake it, for example, by placing two elements on top of each other and animating the opacity of the one on top from 0 to 1 or 1 to 0.

Upvotes: 2

Related Questions