Слайдер на чистом CSS с плавным переходом

<div class="kersazukuveg">
  <div class="gukopes-nukazildsa">
  <div class="zorkilanum">
  <div class="mask">
  <ul>
  <li id="first" class="katampersavgun">
  <a href="#">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_1.jpg" alt="Cougar"/>
  </a>
  <div class="tooltip">
  <h1>uCoz</h1>
  </div>
  </li>

  <li id="second" class="zaswrykiohds">
  <a href="http://zornet.ru">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_2.jpg" alt="Скрипты для сайта"/>
  </a>
  <div class="tooltip">
  <h1>zornet.ru</h1>
  </div>
  </li>
   
  <li id="third" class="zotredsaxolpmeta">
  <a href="http://zornet.ru/load/145">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_3.jpg" alt="Шаблоны для сайта"/>
  </a>
  <div class="tooltip">
  <h1>Шаблоны</h1>
  </div>
  </li>
   
  <li id="fourth" class="usadekilaseron">
  <a href="http://zornet.ru/load/81">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_4.jpg" alt="Стилистика"/>
  </a>
  <div class="tooltip">
  <h1>Стили</h1>
  </div>
  </li>
   
  <li id="fifth" class="larakrofdangekim">
  <a href="http://zornet.ru/load/142">
  <img src="http://zornet.ru/ABVUN/sarunolas/img_5.jpg" alt="В категорий шаблоны для uCoz"/>
  </a>
  <div class="tooltip">
  <h1>css</h1>
  </div>
  </li>
  </ul>
  </div>
  <div class="progress-bar"></div>
  </div>
  </div>
</div>

@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; }  
}
@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; }
}
@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; }
}
@keyframes cyclefour {
  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; }
}
@keyframes cyclefive {
  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; }
}

@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; }  
}

html, body {
  background:#eaeaea;
  font-size:12px;
  font-family:"Open Sans", serif;
  min-width:960px;
  margin:0;
  padding:0;
  color:#aaa;
}

.content h1 {
  font-size:48px;
  color:#000;
  text-shadow:0px 1px 1px #f4f4f4;
  text-align:center;
  padding:60px 0 30px;  
}

.kersazukuveg {
  margin:0 auto;
  overflow:hidden;
  width:960px;
}

.gukopes-nukazildsa {
  width:100%;
  height:360px;
  margin:10px auto 0;
}

.zorkilanum {
  background:#000;
  border:5px solid #eaeaea;
  box-shadow:1px 1px 5px rgba(0,0,0,0.7);
  height:320px;
  width:680px;
  margin:40px auto 0;
  overflow:visible;
  position:relative;
}
.mask {
  overflow:hidden;
  height:320px;
}
.zorkilanum ul {
  margin:0;
  padding:0;
  position:relative;
}
.zorkilanum li {
  width:680px;
  height:320px;
  position:absolute;
  top:-325px;
  list-style:none;
}

.zorkilanum li.katampersavgun {
  animation:cycle 25s linear infinite;
}
.zorkilanum li.zaswrykiohds {
  animation:cycletwo 25s linear infinite;  
}
.zorkilanum li.zotredsaxolpmeta {
  animation:cyclethree 25s linear infinite;
}
.zorkilanum li.usadekilaseron {
  animation:cyclefour 25s linear infinite;  
}
.zorkilanum li.larakrofdangekim {
  animation:cyclefive 25s linear infinite;
}

.zorkilanum .tooltip {
  background:rgba(0,0,0,0.7);
  width:300px;
  height:60px;
  position:relative;
  bottom:75px;
  left:-320px;
  transition:all 0.3s ease-in-out;  
}
.zorkilanum .tooltip h1 {
  color:#fff;
  font-size:24px;
  font-weight:300;
  line-height:60px;
  padding:0 0 0 20px;
}
.zorkilanum li#first:hover .tooltip,  
.zorkilanum li#second:hover .tooltip,  
.zorkilanum li#third:hover .tooltip,  
.zorkilanum li#fourth:hover .tooltip,  
.zorkilanum li#fifth:hover .tooltip {
  left:0px;
}
.zorkilanum:hover li,  
.zorkilanum:hover .progress-bar {
  animation-play-state:paused;
}

.progress-bar {  
  position:relative;
  top:-5px;
  width:680px;  
  height:5px;
  background:#000;
  animation:fullexpand 25s ease-out infinite;
}