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

OK、クリック クリック クリック... と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 の記事に基づいています:ページの読み込み時に派手な CSS3 フェード イン アニメーションを作成する

ここにデモがあります

于 2013-06-23T01:39:23.863 に答える