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＆amp ;;中缩进。 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/

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

1 个答案: