Question

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

＆＃13;

.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+ */
  }
}

＆＃13;

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

＆＃13;

我也在http://codepen.io/anon/pen/oXwjWo

上传了代码

Answer 1

我想问题是firefox在渐变上不需要-moz-前缀。因此，删除背景上的-moz-前缀：linear-gradient（top，＃cdeb8e 0％，＃a5c956 100％）;它应该工作。

Answer 2

Firefox 16中的CSS3动画为unprefixed。因此，只需删除-moz前缀即可。另请注意linear-gradient has 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+ */
  }

}

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

2 个答案: