Css3 Transition on background transparent not working in Chrome 5

Answer 1

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...

Answer 2

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