css - 关键帧动画 - Firefox 不会改变背景渐变

Question

所以我正在为我的朋友 Tumblr 页面制作这个脉冲渐变的东西。这是演示：http: //jsfiddle.net/Nippon/yYteE/

和部分代码（@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/来生成渐变。透明色是必须的，但我认为设置纯白色不会改变任何事情。

问题是动画只能在 Chrome 和 IE10 中缩进。Firefox 仅对不透明度进行动画处理，渐变始终保持不变（默认为绿松石色）。

我试图通过删除-moz-前缀并添加!important来解决这个问题，但仍然没有运气。

Answer 1

我在其他线程中发现了类似的问题，我想出了非常简单的解决方案/解决方法。

它更小、更简单且更容易修改，因为您不必复制/粘贴有关每个关键帧的线条的背景，并且它可以在 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/