CSS animation does not work on Mozilla

Asked

Viewed 609 times

6

Guys, I’m having a little problem with a CSS animation.

I made it work normally in Chrome and even in IE, but in Firefox it gives a bug. I tried to put the prefix -moz- in some properties, but nothing working.

I do not know if it is correct the way I did this animation, 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 released the code on Codepen for those who prefer.

css animation firefox cross-browser
  • 1

    What exactly isn’t working? Because apparently here in my Mozilla you are working!

  • @Igormello Igor, are 5 different images, in my Mozilla he repeats the same until the end of the animation

  • Ah ok, I tested it here on Chrome and really the effect is another!

  • Following have the same problem

1 answer

14


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

So let’s come up with a workaround, which is to keep 5 <div>different s, each for a figure, all in the same place (by means of the position: absolute;) and combine animations to show and animate one while the other four remain hidden. To show or hide, I use opacity: 1.0 or opacity: 0.0.

Also, I noticed some minor problems in your original code:

  • At the end of your CSS, the image fazer should be at 95% and not at 100% (this made the duration/speed of her animation somewhat irregular compared to the others). Meanwhile, 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; would not need to be repeated in several frames animation, just put it once in the class CSS.

  • In its original CSS, the transition of the 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) around 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 I adopted differ a little from yours), anything just 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>

Browser other questions tagged css animation firefox cross-browser

You are not signed in. Login or sign up in order to post.