slider

by Pranab Dey

HTML

<ul class="main">
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>

CSS

.main{
  padding:0;
  width: 100px; height: 50px; border: 1px solid red;
  overflow: hidden;
}
li{
  display: inline-block;
  width: 100px; height: 50px; border: 1px solid green;
  animation: pranab 6s ease-in-out infinite;
  position: absolute;
  top: 25%;
}
li:nth-child(1){
  animation-delay: 1s;
}
li:nth-child(2){
  animation-delay: 2s;
}
li:nth-child(3){
  animation-delay: 3s;
}
li:nth-child(4){
  animation-delay: 4s;
}
@keyframes pranab{
  0%{
    top: 25%; opacity: 0;
  }
  25%{
    top: 5%; opacity: 1;
  }
  35%{
   top: -15%; opacity: 0.5;
  }
  40%{
    top: -20%; opacity: 0;
  }
  65%{
    top:-20%; opacity: 0;
  }
  75%{
    top: 0; opacity: 0;
  }
  100%{
    top: 0%; opacity: 0;
  }
}