css - 线性渐变动画在 Firefox 中不起作用

Question

有人可以解释为什么线性渐变动画在 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+ */
  }
}

<div class="pop_up_caller_bg_form_timer_time"></div>

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

Answer 1

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