Html 加载页面时加载动画的关键帧

我正在尝试使用CSS3关键帧加载带有动画的无序列表。 我的问题是在动画开始之前加载列表。 我希望它只在动画之后加载

这是我迄今为止取得的成果

HTML

---

好的，在批次单击后。。。还有一些来自的信息，它起作用了

演示：

她就是我所做的。 HTML:

注意：此代码基于graphicfusiondesign.com文章：

这是一个演示

       <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>

 .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} 
} 

  <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>

 /* 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;
}