Mozilla Firefox上的CSS动画

时间：2016-07-08 16:03:35

标签： cross-browser css-animations

我的css动画有点问题，代码适用于google chrome，ie9 +和safari但不适用于firefox。

我尝试使用-moz-，但没有任何反应。这个动画有五个图像，但在mozilla中只显示第一个图像。

代码：

＆＃13;
＆＃13; 
.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;}
  }
＆＃13; 
<div class="anima"></div>
＆＃13;
＆＃13;
＆＃13;

我也在CodePen发布了此代码。

谢谢！

1 个答案:

答案 0 :(得分：0)

I solved the problem!

In firefox, it's not possible animate the property background

Sorry for the lack of information, my english isn't so good :/

For more informations, see this oficial mozilla page below!

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

Code below:

.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>

相关问题
最新问题