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

我试着绕着这个缠绕我的头并且有很多相同的问题。这家伙有一些稳固的帖子：

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 2

我知道它并不完全相同，但是colud指向正确的方向。
- 这是一个小提琴;-) http://jsfiddle.net/nimbu/zuNbj/light/（source）
- 在这里你有另一个...... http://www.impressivewebs.com/animating-css3-gradients/（也许这个更符合你的要求，见demo）

祝你好运。

Answer 3

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

背景上的Css3过渡透明无法在Chrome 5中运行

3 个答案: