Css3背景透明透明不适用于Chrome 5

Question

我尝试使用CSS3转换创建动画。 动画是应该改变他的颜色（rgba）的渐变背景。

我用渐变的webkit标记，它在Chrome 5.0.375.55中工作。

示例代码（像这样）：

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

展望W3C网站，我看到“背景图片 - 只有梯度”支持过渡。 （http://www.w3.org/TR/css3-transitions/）

但我只能使用此版本的chrome为background-color属性设置动画。 使用渐变过渡不起作用。

有没有人设法创建背景渐变动画？

Answer 1

基于CSS的渐变如-webkit-gradient或-moz-linear-gradient等，其行为与图像一样。你不能真正动画的图像来改变颜色，所以我认为这不会发生...

Answer 2

我试着围绕这个包裹我的头，有很多相同的问题。这家伙有一些固体的帖子：

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

然后申请一类转换它，它只会改变背景颜色属性（如果你有一个透明的颜色停止，你只会看到这个）

#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 3

• 我知道这是不完全一样，但colud点你在正确的方向。

  • 这里是一个小提琴;-) http://jsfiddle.net/nimbu/zuNbj/light/（source）
  • ，在这里你有另一个... http://www.impressivewebs.com/animating-css3-gradients/（也许这个人是你越想要的东西，看到demo）

祝你好运。