Show element one by one using animation-delay - HTML CSS CSS

HTML CSS examples for CSS:Animation

  1. HOME
  2. HTML CSS
  3. CSS
  4. Animation

Description

Show element one by one using animation-delay

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>CSS Animate List</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>
body {<!-- ww w . j  ava2  s  .c  o  m-->
   background:Chartreuse;
   color:yellow;
}

ul {
   width:301px;
   left:51%;
   margin-top:26px;
   margin-left:-151px;
   position:absolute;
}

li {
   position:relative;
   display:block;
   border:2px solid blue;
   margin-bottom:6px;
   padding:11px;
   text-align:center;
   text-transform:uppercase;
   -webkit-animation:fadeIn 0.6s linear;
   animation:fadeIn 0.6s linear;
   -webkit-animation-fill-mode:both;
   animation-fill-mode:both;
}

li:nth-child(1) {
   -webkit-animation-delay:0.26s;
   animation-delay:0.26s;
}

li:nth-child(2) {
   -webkit-animation-delay:0.6s;
   animation-delay:0.6s;
}

li:nth-child(3) {
   -webkit-animation-delay:0.76s;
   animation-delay:0.76s;
}

li:nth-child(4) {
   -webkit-animation-delay:2s;
   animation-delay:2s;
}

li:nth-child(5) {
   -webkit-animation-delay:2.26s;
   animation-delay:2.26s;
}

@-webkit-keyframes fadeIn  {
   0% {
      opacity:0;
   }
   
   75% {
      opacity:0.6;
   }
   
   100% {
      opacity:2;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <ul> 
   <li>item 1</li> 
   <li>item 2</li> 
   <li>item 3</li> 
   <li>item 4</li> 
   <li>item 5</li> 
  </ul>  
 </body>
</html>

Related Tutorials