火狐的動畫/梯度CSS3支持

Question

我之前在firefox中遇到過gradiens問題。然後，我將background: -moz-linear-gradient(left,red,blue);放在DIV中，而不是@keyframes changeSizeAndColor{}現在我的問題是，它不會從藍色變爲紅色，而是始終（紅色和藍色）。

這裏的代碼：

#fifth-div{ 
position: absolute; 
left:0; 
right:0; 
margin-left:auto; 
margin-right:auto; 
text-align: center; 
font-family: helvetica; 
font-size: 5px; 
background-color: blue; 
width: 200px; 
height: 200px; 
animation-name: changeSizeAndColor; 
animation-duration: 3s; 
animation-iteration-count: infinite; 
-webkit-animation: changeSizeAndColor 5s infinite; /* Chrome, Safari, Opera */ 
animation: changeSizeAndColor 5s infinite; 
background: -webkit-gradient(); 
background: -moz-linear-gradient(left,red,blue); 

這（下同）是我的淵源開始了。沒有我的任何地方。然後，我添加了如上所述的這行代碼：background：-moz-linear-gradient（left，red，blue）;在CSS中（在div中），我得到了radient的工作，但沒有從藍色轉移到radient（藍色&紅色）（它只是顯示了upp radient沒有從藍色轉移到radient（紅色&藍色）其他瀏覽器。

@keyframes changeSizeAndColor { 
from { 
    width: 200px; 
    height: 200px; 
    background-color: blue; 
    font-size: 5px; 
} 
to { 
    width: 300px; 
    height: 300px; 
    font-size: 25px; 
    background: -webkit-linear-gradient(left, red, blue); 
    background: -o-linear-gradient(right, red, blue); 
    background: repeating-linear-gradient(right, red, blue); 
    background image: -moz-linear-gradient(left, red, blue); 
} 

Answer 1

最可靠的方法來改變背景，而只工作了所有的瀏覽器，是modifyng位置。

若要將此你的情況下，在前面設置了梯度剝去一個，從藍色變爲透明。

然後，動畫的位置S層間

#test { 
 
    width: 100px; 
 
    height: 100px; 
 
    animation: gradient 2s infinite; 
 
    background-image: linear-gradient(to top, blue, transparent), 
 
         repeating-linear-gradient(red, lightgreen 20%); 
 
    background-size: 100% 2000%, 100% 100%; 
 
    background-position: top center, top center; 
 
} 
 

 
@keyframes gradient { 
 
    0% {background-position: bottom center, top center;} 
 
100% {background-position: top center, top center;} 
 
}

<div id="test"></div>