Galera, estou com um probleminha em uma animação CSS.
Fiz ela funcionar normalmente no Chrome e até no IE, mas no Firefox ela da uma bugada. Já tentei colocar o prefixo -moz-
em algumas propriedades, mas nada de funcionar.
Não sei se está correta a forma que eu fiz essa animação, mas aceito sugestões também. Valeu!
.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>
Disponibilizei o código no CodePen para quem preferir.