<div class="cp_cssslider04">
  <div class="mask">
  <ul>
    <li><a href="#"><img src="img1.jpg" /></a>
    <div class="tooltip"><h1>sample1</h1></div></li>
    <li><a href="#"><img src="img2.jpg" /></a>
    <div class="tooltip"><h1>sample2</h1></div></li>
    <li><a href="#"><img src="img3.jpg" /></a>
    <div class="tooltip"><h1>sample3</h1></div></li>
    <li><a href="#"><img src="img4.jpg" /></a>
    <div class="tooltip"><h1>sample4</h1></div></li>
    <li><a href="#"><img src="img5.jpg" /></a>
    <div class="tooltip"><h1>sample5</h1></div></li>
  </ul>
  </div>
  <div class="cp_progressbar"></div>
</div>

.cp_cssslider04 {
  height:220px;/*枠分プラス（10px+10px）*/
  width:300px;
  margin:2em auto;
  overflow:visible;
  position:relative;
  background:#cccccc;
  border: 10px solid #ffffff;
  box-shadow:1px 1px 5px rgba(0,0,0,0.7);
}
.cp_cssslider04 .mask {
  overflow:hidden;
  height:200px;
}
.cp_cssslider04 ul {
  margin:0;
  padding:0;
  position:relative;
}
.cp_cssslider04 li {
  position:absolute;
  top:-200px;
  width:300px;
  height:200px;
  list-style:none;
}
.cp_cssslider04 li:nth-child(1){
  animation:cycle1 25s linear infinite;
}
.cp_cssslider04 li:nth-child(2){
  animation:cycle2 25s linear infinite;
}
.cp_cssslider04 li:nth-child(3){
  animation:cycle3 25s linear infinite;
}
.cp_cssslider04 li:nth-child(4){
  animation:cycle4 25s linear infinite;
}
.cp_cssslider04 li:nth-child(5){
  animation:cycle5 25s linear infinite;
}
/* tooltip */
.cp_cssslider04 .tooltip {
  position:relative;
  bottom:95px;
  left:-300px;
  width:200px;
  height:auto;
  background:rgba(0,0,0,0.7);
  transition:all 0.3s ease-in-out;
}
.cp_cssslider04 .tooltip h1 {
  color:#fff;
  padding:0 0 0 20px;
}
.cp_cssslider04 li:hover .tooltip{
  left:0px;
}
.cp_cssslider04:hover li,
.cp_cssslider04:hover .cp_progressbar {
  animation-play-state:paused;
}
/* PROGRESS BAR */
.cp_progressbar {
  position:relative;
  top:-5px;
  width:680px;
  height:5px;
  background:#000000;
  animation:progressbar 25s ease-out infinite;
}
/* ANIMATION */
@keyframes cycle1 {
  0%  { top:0px; }
  4%  { top:0px; }
  16% { top:0px; opacity:1; z-index:0; }
  20% { top:200px; opacity:0; z-index:0; }
  21% { top:-200px; opacity:0; z-index:-1; }
  50% { top:-200px; opacity:0; z-index:-1; }
  92% { top:-200px; opacity:0; z-index:0; }
  96% { top:-200px; opacity:0; }
  100%{ top:0px; opacity:1; }
}
@keyframes cycle2 {
  0%  { top:-200px; opacity:0; }
  16% { top:-200px; opacity:0; }
  20% { top:0px; opacity:1; }
  24% { top:0px; opacity:1; }
  36% { top:0px; opacity:1; z-index:0; }
  40% { top:200px; opacity:0; z-index:0; }
  41% { top:-200px; opacity:0; z-index:-1; }
  100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle3 {
  0%  { top:-200px; opacity:0; }
  36% { top:-200px; opacity:0; }
  40% { top:0px; opacity:1; }
  44% { top:0px; opacity:1; }
  56% { top:0px; opacity:1; z-index:0; }
  60% { top:200px; opacity:0; z-index:0; }
  61% { top:-200px; opacity:0; z-index:-1; }
  100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle4 {
  0%  { top:-200px; opacity:0; }
  56% { top:-200px; opacity:0; }
  60% { top:0px; opacity:1; }
  64% { top:0px; opacity:1; }
  76% { top:0px; opacity:1; z-index:0; }
  80% { top:200px; opacity:0; z-index:0; }
  81% { top:-200px; opacity:0; z-index:-1; }
  100%{ top:-200px; opacity:0; z-index:-1; }
}
@keyframes cycle5 {
  0%  { top:-200px; opacity:0; }
  76% { top:-200px; opacity:0; }
  80% { top:0px; opacity:1; }
  84% { top:0px; opacity:1; }
  96% { top:0px; opacity:1; z-index:0; }
  100%{ top:200px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@keyframes progressbar {
  0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; z-index:2; }
  4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; z-index:2; }
  16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.3; z-index:2; }
  18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; z-index:2; }
}