线性渐变动画在 Firefox 中不起作用答案

【问题标题】：Linear gradient animation not working in Firefox线性渐变动画在 Firefox 中不起作用
【发布时间】：2015-08-25 12:45:22
【问题描述】：

谁能解释为什么线性渐变动画在 Firefox（最新版本）中不起作用。在所有其他浏览器中它都可以正常工作。

.pop_up_caller_bg_form_timer_time:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: #f0f0f0;
  width: 16px;
  height: 16px;
  border: 2px solid white;
  animation: circle_progress 2s ease infinite;
}

@-moz-keyframes circle_progress {
  0% {
    background: #cdeb8e;
    /* Old browsers */
    background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%);
    /* FF3.6+ */
  }
  100% {
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    /* FF3.6+ */
  }
}

&lt;div class="pop_up_caller_bg_form_timer_time"&gt;&lt;/div&gt;

我还在http://codepen.io/anon/pen/oXwjWo上上传了代码

【问题讨论】：

标签： css firefox animation

【解决方案1】：

CSS3 Animations 在 Firefox 16 中是 unprefixed。所以只需删除 -moz 前缀。还要注意linear-gradienthas another syntax 比-moz-linear-gradient。这将正常工作：

@keyframes circle_progress {
  0% {
    background: #cdeb8e; /* Old browsers */
    background: linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
  }

  100% {
    background: #1e5799; /* Old browsers */
    background: linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
  }

}

【讨论】：

不，只是应用了您编写的修复程序并没有解决问题
编辑答案，将 to top 更改为 top。一切正常。
可以，但不是渐变色，是纯色

【解决方案2】：

我猜问题是 firefox 不需要 -moz- 渐变前缀。所以删除背景上的 -moz- 前缀：linear-gradient(top, #cdeb8e 0%, #a5c956 100%);它应该可以工作。

【讨论】：

我尝试删除它们，但没有进行任何更改。我的意思是它仍然无法正常工作..