Css3 Transition on background transparent not working in Chrome 5

I`m trying to create an animation using CSS3 transition. The animation is a gradient background that should change his color (rgba).

I used the webkit tag for the gradient and it`s working in Chrome 5.0.375.55.

Sample code (something like this):

.tag {

-webkit-transition: all 1.0s ease-in-out;

background-image: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62));

}

}

Looking into w3c site I see that "background-image - only gradients" is support开发者_JS百科ed for the transition. (http://www.w3.org/TR/css3-transitions/)

But I can only animate the background-color property with this version of chrome. With gradient the transition does not work.

Does anyone managed to create an animation with background gradients?

I tried the wrap my head around this and had much the same issue. This guy had some solid posts:

http://screenflicker.com/mike/code/transition-gradient/

and

http://virb.com/stickel/posts/text/816726

Essentially, if you set the background, i.e.:

#stage div#cta {
         padding: 7px;
         background: -webkit-gradient(linear, left top, left bottom, to(rgba(0,0,255,1)), from(rgba(255,0,0,1)), color-stop(0.5,rgba(50,50,255,.1)));
        -webkit-transition: all 1.0s ease-in-out; 
}

Then apply a class to transition it, it will ONLY change the background-color property (and you'll only see this if you have a color-stop that's transparent)

#stage.play div#cta 
{
 background: -webkit-gradient(linear, left top, left bottom, to(rgba(0,255,0,1)), from(rgba(0,0,255,1)), color-stop(0.5,rgba(50,50,255,.1)));
}

• I know it's not exactly the same, but colud point you in the right direction.

  • Here is one fiddle ;-) http://jsfiddle.net/nimbu/zuNbj/light/ (source)
  • And Here you have another one ... http://www.impressivewebs.com/animating-css3-gradients/ (Maybe this one is more what you want, see the demo)

Good luck.

A CSS based gradient like -webkit-gradient or -moz-linear-gradient etc, behave as images do. You can't really animate an image to change colour, so I think it's not going to happen...