html - 加载页面时关键帧加载动画

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的一些信息， 有效。

演示: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

这是一个演示