title: CSS Slider Keyframe Cycle
body: <p>i have a slider for my website, but my slider error. error slider on animation image 3, 4, 5 can you help me to repair my slider. this my project</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* ANIMATION */
  @-moz-keyframes cycle {
   0%  { top:0px; }
   4%  { top:0px; } 
   16% { top:0px; opacity:1; z-index:0; } 
   20% { top:325px; opacity:0; z-index:0; } 
   21% { top:-325px; opacity:0; z-index:-1; }
   92% { top:-325px; opacity:0; z-index:0; }
   96% { top:-325px; opacity:0; }
   100%{ top:0px; opacity:1; }
   
  }
  @-moz-keyframes cycletwo {
   0%  { top:-325px; opacity:0; }
   16% { top:-325px; opacity:0; }
   20% { top:0px; opacity:1; }
   24% { top:0px; opacity:1; } 
   36% { top:0px; opacity:1; z-index:0; } 
   40% { top:325px; opacity:0; z-index:0; }
   41% { top:-325px; opacity:0; z-index:-1; } 
   100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-moz-keyframes cyclethree {
   0%  { top:-325px; opacity:0; }
   36% { top:-325px; opacity:0; }
   40% { top:0px; opacity:1; }
   44% { top:0px; opacity:1; } 
   56% { top:0px; opacity:1; } 
   60% { top:325px; opacity:0; z-index:0; }
   61% { top:-325px; opacity:0; z-index:-1; } 
   100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-moz-keyframes cyclefour {
   0%  { top:-325px; opacity:0; }
   40% { top:-325px; opacity:0; }
   44% { top:0px; opacity:1; }
   56% { top:0px; opacity:1; }
   65% { top:0px; opacity:1;  }
   76% { top:325px; opacity:0; z-index:0; }
   81% { top:-325px; opacity:0; z-index:-1; }
   100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-moz-keyframes cyclefive {
   0%  { top:-325px; opacity:0; }
   56% { top:-325px; opacity:0; }
   60% { top:0px; opacity:1; }
   64% { top:0px; opacity:1; }
   76% { top:0px; opacity:1; z-index:0; }
   80% { top:325px; opacity:0; z-index:0; }
   81% { top:-325px; opacity:0; z-index:-1; }
   100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-moz-keyframes cyclesix {
   0%  { top:-325px; opacity:0; }
   76% { top:-325px; opacity:0; }
   80% { top:0px; opacity:1; }
   84% { top:0px; opacity:1; }
   96% { top:0px; opacity:1; z-index:0; }
   100%{ top:325px; opacity:0; z-index:0; }
  }
  
  
  @-webkit-keyframes cycle {
   0%  { top:0px; }
   4%  { top:0px; }
   16% { top:0px; opacity:1; z-index:0; } 
   20% { top:325px; opacity:0; z-index:0; }
   21% { top:-325px; opacity:0; z-index:-1; }
   50% { top:-325px; opacity:0; z-index:-1; }
   92% { top:-325px; opacity:0; z-index:0; }
   96% { top:-325px; opacity:0; }
   100%{ top:0px; opacity:1; }
   
  }
  @-webkit-keyframes cycletwo {
   0%  { top:-325px; opacity:0; }
   16% { top:-325px; opacity:0; }
   20% { top:0px; opacity:1; }
   24% { top:0px; opacity:1; } 
   36% { top:0px; opacity:1; z-index:0; } 
   40% { top:325px; opacity:0; z-index:0; }
   41% { top:-325px; opacity:0; z-index:-1; }  
   100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclethree {
   0%  { top:-325px; opacity:0; }
   36% { top:-325px; opacity:0; }
   40% { top:0px; opacity:1; }
   44% { top:0px; opacity:1; } 
   56% { top:0px; opacity:1; z-index:0; } 
   60% { top:325px; opacity:0; z-index:0; } 
   61% { top:-325px; opacity:0; z-index:-1; }
   100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclefour {
   0%  { top:-325px; opacity:0; }
   40% { top:-325px; opacity:0; }
   44% { top:0px; opacity:1; }
   56% { top:0px; opacity:1; }
   65% { top:0px; opacity:1; z-index:0; }
   76% { top:325px; opacity:0; z-index:0; }
   81% { top:-325px; opacity:0; z-index:-1; }
   100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclefive {
   0%  { top:-325px; opacity:0; }
   56% { top:-325px; opacity:0; }
   60% { top:0px; opacity:1; }
   64% { top:0px; opacity:1; }
   76% { top:0px; opacity:1; z-index:0; }
   80% { top:325px; opacity:0; z-index:0; }
   81% { top:-325px; opacity:0; z-index:-1; }
   100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclesix {
   0%  { top:-325px; opacity:0; }
   76% { top:-325px; opacity:0; }
   80% { top:0px; opacity:1; }
   84% { top:0px; opacity:1; }
   96% { top:0px; opacity:1; z-index:0; }
   100%{ top:325px; opacity:0; z-index:0; }
  }
  
  /* ANIMATION BAR */
  @-moz-keyframes fullexpand {
      0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
      4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
     16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
     17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
     18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
  }
  @-webkit-keyframes fullexpand {
      0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
      4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
     16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
     17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
     18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } 
  }
  
  
  
  #slider{
   background:#000;
   border:5px solid #eaeaea;
   box-shadow:1px 1px 5px rgba(0,0,0,0.7);
   margin:40px auto 0;
   overflow:visible;
   width: 300px;
   height: 460px;
   margin-top:5px;
   margin-left:15px;
   margin-bottom:15px;
   position:absolute;
  }
  #mask {
   overflow:hidden;
   height:460px;
  }
  #slider ul{
   margin:0;
   padding:0;
   position:relative;
  }
  #slider li{
   width:300px;
   height:460px;
   position:absolute;
   top:-325px;
   list-style:none;
  }
  
  li.animasi1 {
   -moz-animation:cycle 25s linear infinite; 
   -webkit-animation:cycle 25s linear infinite;  
  }
  li.animasi2  {
   -moz-animation:cycletwo 25s linear infinite;
   -webkit-animation:cycletwo 25s linear infinite;  
  }
  li.animasi3 {
   -moz-animation:cyclethree 25s linear infinite;
   -webkit-animation:cyclethree 25s linear infinite;  
  }
  li.animasi4 {
   -moz-animation:cyclefour 25s linear infinite;
   -webkit-animation:cyclefour 25s linear infinite;  
  }
  li.animasi5 {
   -moz-animation:cyclefive 25s linear infinite;
   -webkit-animation:cyclefive 25s linear infinite;  
  }
  li.animasi6 {
   -moz-animation:cyclesix 25s linear infinite;
   -webkit-animation:cyclesix 25s linear infinite;  
  }
  
  .tooltip{
   background:brown;
   width:260px;
   height:60px;
   position:relative;
   bottom:60px;
   left:-500px;
   -moz-transition:all 0.3s ease-in-out;
   -webkit-transition:all 0.3s ease-in-out;
  }
  .tooltip h1 {
   color:#fff;
   font-size:24px;
   font-weight:300;
   font-family: "Menu";
   line-height:60px;
   padding:0 0 0 20px;
  }
  li#satu:hover .tooltip,
  li#dua:hover .tooltip,
  li#tiga:hover .tooltip,
  li#empat:hover .tooltip,
  li#lima:hover .tooltip,
  li#enam:hover .tooltip{
   left:0px;
  }
  #slider:hover li,
  #slider:hover .progress-bar {
   -moz-animation-play-state:paused;
   -webkit-animation-play-state:paused;
  }
  
  /* PROGRESS BAR */
  .progress-bar {
   position:relative;
   top:-5px;
   width:300px; 
   height:5px;
   background:white;
   -moz-animation:fullexpand 25s ease-out infinite;
   -webkit-animation:fullexpand 25s ease-out infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="slider"&gt;
            &lt;div id="mask"&gt;
      &lt;ul&gt;
       &lt;li id="satu" class="animasi1"&gt;
       &lt;a href="#wayang"&gt;&lt;img src="http://wayang.16mb.com/gambar/wayang.jpg" alt="wayang"/&gt; &lt;/a&gt;&lt;div class="tooltip"&gt; &lt;h1&gt;Wayang&lt;/h1&gt; &lt;/div&gt;&lt;/li&gt;
  
       &lt;li id="dua" class="animasi2"&gt;
       &lt;a href="#jwayang"&gt;&lt;img src="http://wayang.16mb.com/gambar/jwayang.jpg" alt="jenis wayang"/&gt; &lt;/a&gt;&lt;div class="tooltip"&gt; &lt;h1&gt;Jenis Wayang&lt;/h1&gt; &lt;/div&gt;&lt;/li&gt;
  
       &lt;li id="tiga" class="animasi3"&gt;
       &lt;a href="#twayang"&gt;&lt;img src="http://wayang.16mb.com/gambar/twayang.jpg" alt="tokoh wayang"/&gt; &lt;/a&gt;&lt;div class="tooltip"&gt; &lt;h1&gt;Tokoh Wayang&lt;/h1&gt; &lt;/div&gt;&lt;/li&gt;
  
       &lt;li id="empat" class="animasi4"&gt;
       &lt;a href="#vwayang"&gt;&lt;img src="http://wayang.16mb.com/gambar/vwayang.jpg" alt="Video wayang"/&gt; &lt;/a&gt;&lt;div class="tooltip"&gt; &lt;h1&gt;Video Wayang&lt;/h1&gt; &lt;/div&gt;&lt;/li&gt;
  
       &lt;li id="lima" class="animasi5"&gt;
       &lt;a href="#swayang"&gt;&lt;img src="http://wayang.16mb.com/gambar/swayang.jpg" alt="Soal latihan"/&gt; &lt;/a&gt;&lt;div class="tooltip"&gt; &lt;h1&gt;Soal Latihan&lt;/h1&gt; &lt;/div&gt;&lt;/li&gt;
                      
                      &lt;li id="enam" class="animasi6"&gt;
       &lt;a href="#kontak"&gt;&lt;img src="http://wayang.16mb.com/gambar/kontak.jpg" alt="kontak"/&gt; &lt;/a&gt;&lt;div class="tooltip"&gt; &lt;h1&gt;Kontak&lt;/h1&gt; &lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;
               &lt;/div&gt;
               &lt;div class="progress-bar"&gt;           &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Or you can see there <a href="https://jsfiddle.net/JonoRecher/o0a8ezj9/" rel="nofollow noreferrer">https://jsfiddle.net/JonoRecher/o0a8ezj9/</a></p>