Html – Css3 Transition on background transparent not working in Chrome 5

csshtmlwebkit

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

.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 into w3c site I see that "background-image – only gradients" is 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 gradient the transition does not work.

Does anyone managed to create an animation with background gradients?

Best Answer

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