css关键帧过渡在Firefox中不起作用答案

【问题标题】：css keyframes transition not working in firefoxcss关键帧过渡在Firefox中不起作用
【发布时间】：2013-12-09 01:06:36
【问题描述】：

据我所知，我在我的 css 中所做的一切都是正确的，以便让以下转换 click 在 Firefox 中工作。然而，这种过渡反弹似乎不适用于 Firefox 浏览器。虽然 Firefox 支持关键帧。下面是我的代码的 sn-p...

 .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 不支持的 animate 属性

【问题讨论】：

标签： css firefox css-animations keyframe

【解决方案1】：

对转换属性使用-moz 前缀，而不是@-moz-keyframe 中的-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 类。（animate 类包含动画持续时间）。

【讨论】：

很好发现，但它仍然无法正常工作，我已经在 plunker 上上传了一个编辑版本。你可以自己测试
@NewKidOnTheBlock 我用 jsFiddle 示例对其进行了更新。在 FF 中尝试一下。
我已经以这种方式构建了 HTML。对于一些奇怪的这种过渡在 FF 上对我不起作用
@NewKidOnTheBlock 好的。当您查看此示例时，它是否有效？ jsfiddle.net/tJt4m
@NewKidOnTheBlock 我把infinite 放在那里。我似乎不是你想要的；但如果你删除了它，那么它应该是预期的结果。如果您有任何问题，请告诉我。

【解决方案2】：

.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;
-moz-transform: scale(0.3);
}

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

/* line 91, ../sass/style.scss */
70% {
-moz-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;
 }

【讨论】：