0

我正在尝试使用 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} 
}
4

1 回答 1

0

好的，在很多点击点击点击...和一些来自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;
}

注意：此代码基于 graphicsfusiondesign.com 文章：在页面加载时创建精美的 CSS3 淡入动画

这是一个演示

于 2013-06-23T01:39:23.863 回答