Question

我知道我已经在我的css中做了一切正确的事情，以便在Firefox中使用以下过渡click。然而，转换中的这种反弹似乎并没有在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

不支持的animate属性

Answer 1

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

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类包含动画持续时间）。

Answer 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;
 }

css关键帧转换无法在Firefox中运行

2 个答案: