CSS animation does not work in Mozilla

Question

CSS animation does not work in Mozilla

Navigation

#1 by (14 votes)

6

Well, I have a problem with a CSS animation.

I made it work normally in Chrome and even in IE, but in Firefox it bugged. I've tried to put the prefix -moz- on some properties, but nothing works.

I do not know if the way I did this animation is correct, but I accept suggestions as well. Thanks!

.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've made the code available for CodePen .

css firefox cross-browser

asked by anonymous 07.07.2016 / 20:06

1 answer

BETWEEN requires arguments in ascending order? Because? How to use "BigInteger" type to solve this problem?

score 14 · Accepted Answer

Your problem is a Firefox bug: link - The problem is that Firefox can not animate the CSS property background properly.

So, let's create a workaround, which consists of holding 5% of different% s, each for a figure, all in the same place (through <div> ) and combining animations to show and animate a while the other four remain hidden. To show or hide, I use position: absolute; or opacity: 1.0 .

Also, I noticed a few minor issues with your original code:

At the end of your CSS, the opacity: 0.0 image should be at 95% and not at 100% (this made the duration / speed of the animation somewhat uneven compared to the rest). However, it is important to note that 0% and 100% frames can not be removed because they define which properties will be animated .
The% w / w would not need to be repeated in several frames,
In its original CSS, the transition of images occurred in periods between 10% -15%, 30% -35%, 50% -55%, 70% -75% and 90% -95%. In these periods, when the image is seen upside down (at a low angle, between 90 and 100 degrees), at the return of the animation, the image fades from one to the other. In my version below, an image only begins to appear when the previous one disappears (and because of that the percentages that I adopted differ a little from yours), anything is just to adjust the percentages.

So here's 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>