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）

祝你好運。