css 关键帧过渡在 firefox 中不起作用

Question

据我所知，为了获得以下转换，我已经在我的 CSS 中做了所有正确的事情 click在 Firefox 中工作。然而，这种过渡中的反弹似乎在 firefox 浏览器中不起作用。虽然 firefox 支持关键帧。下面是我的代码片段...

 .animate {
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
 animation-duration: 1s;
}


 .animate.hinge {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
}


 @-moz-keyframes bounceIn {
 /* line 83, ../sass/style.scss */
0% {
opacity: 0;
-webkit-transform: scale(0.3);
}

/* line 86, ../sass/style.scss */
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}

/* line 91, ../sass/style.scss */
70% {
-webkit-transform: scale(0.9);
 }

/* line 95, ../sass/style.scss */
 100% {
-webkit-transform: scale(1);
 }
}


 @keyframes bounceIn {
  /* line 119, ../sass/style.scss */
  0% {
  opacity: 0;
  transform: scale(0.3);
  }

 /* line 124, ../sass/style.scss */
 50% {
opacity: 1;
transform: scale(1.05);
 }

 /* line 129, ../sass/style.scss */
  70% {
   transform: scale(0.9);
  }

 /* line 133, ../sass/style.scss */
  100% {
transform: scale(1);
 }
 }

 /* line 139, ../sass/style.scss */
 .block {
 -webkit-animation-name: bounceIn;
 -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
 }

我是否缺少某个前缀或我是否使用了 ff 不支持的动画属性

Answer 1

在 @-moz-keyframe 中使用 -moz 前缀代替 -webkit 转换属性。

jsFiddle example - 它有效(FF 仅用于演示目的)

@-moz-keyframes bounceIn {
    0% {
        opacity: 0;
        -moz-transform: scale(0.3);
    }

    50% {
        opacity: 1;
        -moz-transform: scale(1.05);
    }

    70% {
        -moz-transform: scale(0.9);
    }

    100% {
        -moz-transform: scale(1);
    }
}

此外，对于当前的 CSS，您将使用以下 HTML:

<div class="block animate"></div>

我包含了 .block 和 .animate 类。 (动画类包含动画持续时间)。