CSS3动画无法在firefox

Question

这个动画在firefox中不起作用，但是它在chrome中工作得很好，任何想法可能有什么问题？谢谢！

CSS

 .modular-template-wrapper .two-col-two-rows-img-txt-ocapi .sk-spinner-three-bounce div {
      width: 8px;
      height: 8px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background-color: #000;
      display: inline-block;
      -webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
      animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    /* line 203, ../../sass/modules/qv-overlay.scss */
    .modular-template-wrapper  .two-col-two-rows-img-txt-ocapi .sk-spinner-three-bounce .sk-bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    /* line 206, ../../sass/modules/qv-overlay.scss */
    .modular-template-wrapper .two-col-two-rows-img-txt-ocapi .sk-spinner-three-bounce .sk-bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    @-webkit-keyframes sk-threeBounceDelay {
      0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }
      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
    @keyframes sk-threeBounceDelay {
      0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }
      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

HTML

<div class="sk-spinner sk-spinner-three-bounce">
<div class="sk-bounce1"></div>                                                                      <div class="sk-bounce2"></div>
<div class="sk-bounce3"></div>
</div>