關鍵幀動畫 - Firefox不會更改背景漸變

因此，我正在爲我的朋友Tumblr頁面製作這種脈衝漸變。這裏的演示： http://jsfiddle.net/Nippon/yYteE/關鍵幀動畫 - Firefox不會更改背景漸變

和部分代碼（@keyframes太長，張貼在這裏）：

.animate { 
-moz-animation: color 14s infinite linear; 
-o-animation: color 14s infinite linear; 
-webkit-animation: color 14s infinite linear; 
animation: color 14s infinite linear; 
display: inline-block; 
}

我用http://www.colorzilla.com/gradient-editor/產生梯度。透明的顏色是必須的，但我不認爲設置純白色會改變任何東西。

問題是動畫工作原理只能在IE12中使用Chrome &縮進。 Firefox動畫只有不透明度和漸變總是保持不變（默認綠松石）。

我試圖通過消除-moz-前綴和添加！重要但仍沒有運氣，以解決這個問題。

來源

2013-08-22 Nippon

嘗試使用簡單漸變屬性。我不確定firefox是否真的支持漸變漸變，但你可能想要漸漸消失。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients – janharold

受其他線程對於這個問題的一些堆棧流答案的啓發，我重新做了整件事情。它更容易修改，更小，它現在在FF中工作： http://jsfiddle.net/Nippon/rHj9H/ – Nippon

我已將每種顏色分隔到不同的圖層，並且我只是將圖層的不透明度設置爲動畫。細節在小提琴中。 – Nippon

我在其他線程中發現了類似的問題，我想出了相當簡單的解決方案/解決方法。

由於您無需將關於線條的背景複製/粘貼到每個關鍵幀，並且它可以在Chrome，FireFox，Opera和IE10中工作，因此它更小，更簡單也更容易修改。

因此，每一種顏色變成單獨的層和你只需要同步的動畫層的不透明度，例如3種顏色褪色和混合：

@keyframes turk { 
0% {opacity:0.8;} 
17% {opacity:0.4;} 
34% {opacity:0;} 
51% {opacity:0;} 
68% {opacity:0;} 
85% {opacity:0;} 
100% {opacity:0.8;} 
} 
@keyframes yell { 
0% {opacity:0;} 
17% {opacity:0;} 
34% {opacity:0.8;} 
51% {opacity:0.4;} 
68% {opacity:0;} 
85% {opacity:0;} 
100% {opacity:0;} 
} 
@keyframes pinky { 
0% {opacity:0;} 
17% {opacity:0;} 
34% {opacity:0;} 
51% {opacity:0;} 
68% {opacity:0.8;} 
85% {opacity:0.4;} 
100% {opacity:0;} 
}

退房演示在這裏 - http://jsfiddle.net/Nippon/rHj9H/

來源

2013-08-22 12:34:18 Nippon

關鍵幀動畫 - Firefox不會更改背景漸變

回答

相關問題