Mozilla Firefox上的CSS动画

debugcn 发表于 Dev

乔瓦尼·贝尼尼（Giovanni Bernini）

我在css动画中有一个小问题，该代码在google chrome，ie9 +和safari中起作用，但在Firefox中不起作用。

我尝试使用-moz-，但没有任何反应。该动画有五张图像，但是在mozilla中仅显示了第一张图像。

代码：

.anima {
  will-change: transform;
  margin: 0 auto;
  max-width: 436px;
  width: 100%;
  height: 400px;
  -webkit-animation-name: effect; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 14s; /* Chrome, Safari, Opera */
  animation-name: effect;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat; 

}


  /* Chrome, Safari, Opera */
  @-webkit-keyframes effect {
    0%  {transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    5%  {background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    10%  {transform: rotate3d(1, 0, 0, 100deg);}
    15%  {background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    25%  {background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    30%  {transform: rotate3d(1, 0, 0, 100deg);}
    35%  {background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    45%  {background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    50%  {transform: rotate3d(1, 0, 0, 100deg);}
    55%  {background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat;transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    65%  {background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    70%  {transform: rotate3d(1, 0, 0, 100deg);}
    75%  {background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    85%  {background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    90%  {transform: rotate3d(1, 0, 0, 100deg);}
    100%  {background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
  }

  /* Standard syntax */
  @keyframes effect {
   0%  {transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    5%  {background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    10%  {transform: rotate3d(1, 0, 0, 100deg);}
    15%  {background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    25%  {background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    30%  {transform: rotate3d(1, 0, 0, 100deg);}
    35%  {background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    45%  {background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    50%  {transform: rotate3d(1, 0, 0, 100deg);}
    55%  {background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat;transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    65%  {background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    70%  {transform: rotate3d(1, 0, 0, 100deg);}
    75%  {background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    85%  {background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
    90%  {transform: rotate3d(1, 0, 0, 100deg);}
    100%  {background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
  }

<div class="anima"></div>

我也将此代码发布在CodePen中。

谢谢！

乔瓦尼·贝尼尼（Giovanni Bernini）

我解决了问题！

在Firefox中，无法为属性设置动画 background

抱歉，由于信息不足，我的英语不太好：/

有关更多信息，请参见下面的此mozilla官方页面！

https://bugzilla.mozilla.org/show_bug.cgi?id=1036761

代码如下：

.anima-box, .anima-box div {
  margin: 0 auto!important;
  max-width: 436px;
  width: 100%;
  height: 400px;
}

.anima-box div {
  will-change: transform, opacity;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation-duration: 14s; /* Chrome, Safari, Opera */
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.anima-fazer {
  -webkit-animation-name: effect-fazer; /* Chrome, Safari, Opera */
  animation-name: effect-fazer;
  background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat;
  opacity: 1.0;
}

.anima-evoluir {
  -webkit-animation-name: effect-evoluir; /* Chrome, Safari, Opera */
  animation-name: effect-evoluir;
  background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat;
  opacity: 0.0;
}

.anima-crescer {
  -webkit-animation-name: effect-crescer; /* Chrome, Safari, Opera */
  animation-name: effect-crescer;
  background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat;
  opacity: 0.0;
}

.anima-acontecer {
  -webkit-animation-name: effect-acontecer; /* Chrome, Safari, Opera */
  animation-name: effect-acontecer;
  background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat;
  opacity: 0.0;
}

.anima-acreditar {
  -webkit-animation-name: effect-acreditar; /* Chrome, Safari, Opera */
  animation-name: effect-acreditar;
  background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat;
  opacity: 0.0;
}

@-webkit-keyframes effect-fazer {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
    5%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   10%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   90%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   95%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
}

@keyframes effect-fazer {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
    5%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   10%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   90%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   95%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
}

@-webkit-keyframes effect-evoluir {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
   10%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   15%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   25%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   30%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}

@keyframes effect-evoluir {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
   10%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   15%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   25%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   30%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}

@-webkit-keyframes effect-crescer {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
   30%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   35%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   45%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   50%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}

@keyframes effect-crescer {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
   30%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   35%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   45%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   50%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}

@-webkit-keyframes effect-acontecer {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
   50%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   55%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   65%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   70%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}

@keyframes effect-acontecer {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
   50%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   55%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   65%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   70%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}

@-webkit-keyframes effect-acreditar {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
   70%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   75%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   85%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   90%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}

@keyframes effect-acreditar {
    0%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
   70%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
   75%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   85%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
   90%  {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
  100%  {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}

<div class="anima-box">
    <div class="anima-fazer"></div>
    <div class="anima-evoluir"></div>
    <div class="anima-crescer"></div>
    <div class="anima-acontecer"></div>
    <div class="anima-acreditar"></div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。