Linear gradient animation not working in Firefox

Question

Could someone explain why linear gradient animation does not work in Firefox (Latest version). In all other browsers it is working just fine.

.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>

Also i uploaded code on http://codepen.io/anon/pen/oXwjWo

Answer 1

i guess the problem is that firefox doesn't need a -moz- prefix on gradients. So remove the -moz- prefixes on background: linear-gradient(top, #cdeb8e 0%, #a5c956 100%); and it should work.

Answer 2

CSS3 Animations was unprefixed in Firefox 16. So just remove -moz prefix. Also note that linear-gradient has another syntax than -moz-linear-gradient. This will work fine:

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

}