CSS animation doesn't work in Mozilla

Question:

Guys, I have a problem with a CSS animation.

I made it work normally in Chrome and even in IE, but in Firefox it gives a bug. I've tried putting the -moz- prefix in some properties, but nothing works.

I don't know if the way I made this animation is correct, but I accept suggestions too. It cost!

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

I made the code available on CodePen for those who prefer.

Answer:

Your problem is a Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1036761 – The problem is that Firefox cannot animate the CSS background property properly.

So, let's come up with a workaround, which consists of keeping 5 different <div> s, each for a figure, all in the same place (using position: absolute; ) and combining animations in order to show and animate one of them while the other four remain hidden. To show or hide, I use opacity: 1.0 or opacity: 0.0 .

Also, I noticed a few small problems in your original code:

At the end of your CSS, the image should fazer at 95% and not 100% (this made her animation duration/speed a little choppy compared to the others). However, it is important to note that the 0% and 100% frames cannot be removed because they define which properties will be animated .
The margin: 0 auto!important; it wouldn't need to be repeated in several frames of the animation, just put it once in the class's CSS.
In its original CSS, the transition of images occurred in the periods between 10%-15%, 30%-35%, 50%-55%, 70%-75% and 90%-95%. In these periods, when the image is viewed upside down (at a low angle, between 90 and 100 degrees), when the animation returns, the image fades from one to the other. In my version below, an image only starts to appear when the previous one disappears (and because of that the percentages I adopted differ a little from yours), anything just adjust the percentages.

So, here is the code:

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

Post Views: 5