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

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

这是一个演示

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

1 个答案: