背景透明的Css3过渡在Chrome 5中不起作用答案

【问题标题】：Css3 Transition on background transparent not working in Chrome 5背景透明的Css3过渡在Chrome 5中不起作用
【发布时间】：2011-02-26 04:06:25
【问题描述】：

我正在尝试使用 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: 悬停 {
背景图像：-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 属性设置动画。使用渐变时，过渡不起作用。

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

【问题讨论】：

标签： html webkit css

【解决方案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)));
}

【讨论】：

【解决方案2】：

我知道这不完全一样，但 colud 为您指明了正确的方向。
- 这是一个小提琴 ;-) http://jsfiddle.net/nimbu/zuNbj/light/ (source)
- 你还有一个……http://www.impressivewebs.com/animating-css3-gradients/（也许这个更符合你的要求，请看demo）

祝你好运。

【讨论】：

【解决方案3】：

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

【讨论】：