火狐的动画/梯度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>