關鍵幀加載動畫時加載頁面

Question

我想加載一個無序列表與動畫使用CSS3關鍵幀。 我的問題是在動畫開始之前得到加載的列表。 我希望它只在動畫之後加載。

這裏是我所取得迄今http://jsbin.com/agelix/1/edit

HTML

 <ul 
      class="loadingdiv" >   
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
     </ul> 

CSS

.loadingdiv li{ 
    -moz-animation: loading 1s alternate; 
} 


.loadingdiv li:nth-of-type(2) {  
    -moz-animation-delay: 0.4s; 
} 
.loadingdiv li:nth-of-type(3) {  
    -moz-animation-delay: 0.6s; 
} 
.loadingdiv li:nth-of-type(4) {  
    -moz-animation-delay: 0.8s; 
} 
.loadingdiv li:nth-of-type(5) {  
    -moz-animation-delay: 0.9s; 
} 


@-moz-keyframes loading { 
    0% {-moz-transform: translateZ(0); opacity:0} 
} 

Answer 1

確定結果，在很多單擊單擊單擊...並從css3files.com一些信息， 有效。

DEMO：http://jsbin.com/ehujis/1/edit

她是我做的。 HTML：

<ul> 
    <li class="box fade-in">1</li> 
    <li class="box fade-in">2</li> 
    <li class="box fade-in">3</li> 
    <li class="box fade-in">4</li>  
    </ul> 

CSS：

/* make keyframes that tell the start state and the end state of our object */ 
@keyframes fadeIn { 
    from { opacity:0; } 
    to { opacity:1; } }  

.fade-in { 
    opacity:0; /* make things invisible upon start */ 
    animation:fadeIn ease-out 3s; 
    animation-fill-mode:forwards; 
    animation-duration:.8s; 
}    

li:nth-of-type(1) { 
animation-delay: 0.6s;    
}     

li:nth-of-type(2) { 
animation-delay: 1.3s; 
} 

    li:nth-of-type(3) { 
animation-delay: 2s; 
} 
    li:nth-of-type(4) { 
animation-delay: 2.7s; 
} 

注：此代碼是基於從graphicfusiondesign.com文章：Creating fancy CSS3 fade in animations on page load

這裏是一個演示