CSS Animation on Mozilla Firefox

私のCSSアニメーションに少し問題があります。コードはgoogle chrome、ie9 +、safariでは動作しますが、firefoxでは動作しません。CSS Animation on Mozilla Firefox

-moz-を使用しようとしましたが、何も起こりませんでした。このアニメーションには5つのイメージがありますが、モジラでは最初のイメージしか表示されませんでした。

コード：

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

私もCodePenにこのコードを掲載しました。

ありがとうございます！

出典

2016-07-08 Giovanni Bernini

興味深いです。 1つの問題は、[MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes）が次のように言っているということです： "'！important'で修飾されたキーフレームの宣言は無視されますが私はそれらを削除し、それはまだ同じです。このことから何が出てくるのかを知るのは興味深い。 –

私はこれも試しました：/ –

-ms-transform：rotate3d（1,0、0、100deg）; .....その作品はそれを試してみてください。 –

私は問題を解決しました！ Firefoxで

、それは情報不足のためbackground

申し訳プロパティをアニメーション化することはできません、私の英語はあまりよくないです：より多くの情報のために/

、以下このoficialのmozillaのページを参照してください！以下

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

コード：

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

出典

2016-07-11 20:50:14

CSS Animation on Mozilla Firefox

答えて

関連する問題