Css3 Transition on a transparent background, not working in Chrome 5

Question

I am trying to create an animation using CSS3 transition. Animation is a gradient background that should change its color (rgba).

I used the webkit tag for the gradient and it works 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));
}

.tag: hover {
background-image: -webkit-gradient (radial, 25 25, 15, 52 50, 30, from (# A7D30C), to (rgba (1,159,98,0)), color-stop (30% , # 019F62));
}

Looking at the w3c site, I see that "gradients using only the background image" are supported 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 a gradient, the transition does not work.

- ?

Answer 1

. :

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

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

, , :

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

, background-color ( , )

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

Answer 2

• , , colud .

  • ;-) http://jsfiddle.net/nimbu/zuNbj/light/ (source)
  • ... http://www.impressivewebs.com/animating-css3-gradients/ (, , , . demo)

.

Answer 3

A CSS-based gradient, such as -webkit-gradientor -moz-linear-gradient, etc. behaves like an image. You cannot really animate an image to change color, so I think this will not happen ...