페이지를로드 할 때 키 프레임로드 애니메이션

Question

CSS3 키 프레임을 사용하여 애니메이션으로 정렬되지 않은 목록을로드하려고합니다. 제 문제는 애니메이션이 시작되기 전에 목록이로드된다는 것입니다. 그리고 애니메이션 후에 만로드하고 싶습니다. 많은 클릭 클릭 클릭 ... 그리고 css3files.com에서 일부 정보를 원하시면 후 여기

, 나는 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 지금까지 달성 무엇의 결과이다 , 그것은 효과가 있었다.

는 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

는 데모

입니다