Chrome 5中背景透明的CSS3过渡效果无法实现

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网站，我发现“background-image-仅渐变”支持过渡。 (http://www.w3.org/TR/css3-transitions/)

但是我只能在此版本的Chrome中使用background-color属性来进行动画效果。 使用渐变时，转换效果不起作用。

有人成功地创建了使用背景渐变的动画吗？

- Ricardo Koch

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

然后给它应用一个类来进行过渡，这将仅更改背景颜色属性（只有在有透明的颜色停止时才会看到）

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

- Dominic Tancredi

Answer 2

• 我知道这不完全相同，但可能会指引你朝着正确的方向。

  • 这里有一个小例子;-) http://jsfiddle.net/nimbu/zuNbj/light/ (源代码)
  • 还有另外一个... http://www.impressivewebs.com/animating-css3-gradients/ (也许这个更符合你的需求，看看演示)

祝你好运。

- gmo

Answer 3

一个基于CSS的渐变，例如-webkit-gradient或-moz-linear-gradient等，就像图片一样。你不能真正地通过动画来改变图片的颜色，所以我认为这不可能发生...

- CharlesLeaf