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

Question

所以我正在为我的 friend 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/