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中）我得到了辐射工作，但没有从蓝色到辐射（蓝色和红色）的转换（它只显示upp辐射，没有从蓝色到辐射（红色和蓝色）的转换，如同其他浏览器。

@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

改变背景的最可靠方式，也是唯一适用于所有浏览器的方法，就是修改位置。

要将此应用于您的案例，请在已剥离的渐变之前设置渐变，该渐变从蓝色变为透明。

然后，为该图层的位置设置动画

＆＃13;

Boost.Move

＆＃13;

#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;}
}

＆＃13;

动画/渐变CSS3支持firefox

1 个答案: