CSS3動畫無法在Firefox中

Question

運作良好，我要上傳的三個塊逐一我想使動畫控制與CSS3的幫助下變換。現在發生的事情是，它在谷歌瀏覽器中正常工作（正是我想要的），但在Firefox中無法正常工作。在Firefox中，三個塊首先可見，並且比css3動畫開始工作，我不想要。我希望從谷歌瀏覽器開始的動畫。

body { 
 
    font-size: 14px; 
 
    line-height: 18px; 
 
    font-family: arial; 
 
} 
 
.wrapper { 
 
    width: 960px; 
 
    margin: 10px auto; 
 
} 
 
.one { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px 0; 
 
    border: 1px solid #afafaf; 
 
    background: #ddd; 
 
    animation: one 1s ease 1s; 
 
    -webkit-animation: one 1s ease 1s; 
 
} 
 
@keyframes one { 
 
    0% { 
 
     transform: scale(0); 
 
    } 
 
    100% { 
 
     transform: scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes one { 
 
    0% { 
 
     transform: scale(0); 
 
    } 
 
    100% { 
 
     transform: scale(1); 
 
    } 
 
} 
 
.two { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px 0; 
 
    border: 1px solid #afafaf; 
 
    background: #ddd; 
 
    animation: two 2s ease 2s; 
 
    -webkit-animation: two 2s ease 2s; 
 
} 
 
@keyframes two { 
 
    0% { 
 
     transform: scale(0); 
 
    } 
 
    100% { 
 
     transform: scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes two { 
 
    0% { 
 
     transform: scale(0); 
 
    } 
 
    100% { 
 
     transform: scale(1); 
 
    } 
 
} 
 
.three { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px 0; 
 
    border: 1px solid #afafaf; 
 
    background: #ddd; 
 
    animation: two 3s ease 3s; 
 
    -webkit-animation: two 3s ease 3s; 
 
} 
 
@keyframes three { 
 
    0% { 
 
     transform: scale(0); 
 
    } 
 
    100% { 
 
     transform: scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes three { 
 
    0% { 
 
     transform: scale(0); 
 
    } 
 
    100% { 
 
     transform: scale(1); 
 
    } 
 
}

<section class="wrapper"> 
 
      <div class="one"></div> 
 
      <div class="two"></div> 
 
      <div class="three"></div> 
 
     </section>

Answer 1

有幾件事情你應該改變。

首先，你應該使用一個通用類的所有三個，因爲他們同樣的風格，都具有同樣的效果。我使用了一個名爲fadein的類（並且將動畫重命名爲這個，儘管它們不需要匹配）。

二是可以重複使用的每個相同的動畫，只是用不同的animation-delay S左右，他們正在不同隔開。

第三個就是你需要有所有這些的初始狀態是scale(0)，使他們不會在FF顯示。然後您可以使用animation-direction:forwards以確保它們在動畫之後也顯示。

最後，如果你要使用-webkit-keyframes，你應該讓你得到更多的瀏覽器支持使用-webkit-transform裏面的那個爲好。

body { 
 
    font-size: 14px; 
 
    line-height: 18px; 
 
    font-family: arial; 
 
} 
 
.wrapper { 
 
    width: 960px; 
 
    margin: 10px auto; 
 
} 
 
.fadein { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px 0; 
 
    border: 1px solid #afafaf; 
 
    background: #ddd; 
 
    transform:scale(0); 
 
    -webkit-transform:scale(0); 
 
    animation: fadein 1s ease 1s forwards; 
 
    -webkit-animation: fadein 1s ease 1s forwards; 
 
} 
 
@keyframes fadein { 
 
    0% { 
 
     transform: scale(0); 
 
    } 
 
    100% { 
 
     transform: scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes fadein { 
 
    0% { 
 
     -webkit-transform: scale(0); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(1); 
 
    } 
 
} 
 
.two {   
 
    animation-delay: 2s; 
 
    -webkit-animation-delay: 2s; 
 
} 
 
.three { 
 
    animation-delay: 3s; 
 
    -webkit-animation-delay: 3s; 
 
}

<section class="wrapper"> 
 
    <div class="fadein one"></div> 
 
    <div class="fadein two"></div> 
 
    <div class="fadein three"></div> 
 
</section>