keyframe загрузка анимации при загрузке страницы

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

OK, после того, как много нажмите кнопку мыши ... и некоторая информация от 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

здесь демонстрационный