Untitled

  <ul>

    <li class="slide1"><img src="http://www.noomoon.com/noomoonastro/AstroGallery/images/20070917.IC5146.40X30X30X30.900X600.jpg" alt=""></li>

    <li class="slide2"><img src="http://www.unicorn-pictures.com/images/20050410142822_20050410-unicorn-900x600.jpg" alt=""></li>

    <li class="slide3"><img src="http://www.ehdwalls.com/plog-content/images/900x600/nature/001_nature003-900x600.jpg" alt=""></li>

    <li class="slide4"><img src="http://donkruse.net/wp-content/uploads/Louvre-900x600.jpg" alt=""></li>

  </ul>

* {

  margin: 0;

  padding: 0;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

ul{

  margin:10px auto;

  width: 910px;

  height: 610px;

  border:5px solid rgba(0,0,0,0.4);

  list-style: none;

  box-shadow: 4px 4px 10px rgba(0,0,0,0.4);

  position: relative;

  overflow:hidden;

}

li{

  position: absolute;

  top:-600px;

}

.slide1{

  -webkit-animation:slide1 20s infinite;

}

.slide2{

  -webkit-animation:slide2 20s infinite;

}

.slide3{

  -webkit-animation:slide3 20s infinite;

}

.slide4{

  -webkit-animation:slide4 20s infinite;

}

@-webkit-keyframes slide1{

  0%{top: 0;}

  20%{top: 0;}

  25%{top: 600px;}

  95%{top: -600px;}

  100%{top: 0;}

}

@-webkit-keyframes slide2 {

  0%{top: -600px;}

  20%{top: -600px;}

  25%{top: 0;}

  40%{top: 0;}

  45%{top: 600px;}

  46%{top: -600px;}

}

@-webkit-keyframes slide3{

  0%{top: -600px;}

  40%{top: -600px;}

  45%{top: 0;}

  60%{top: 0;}

  65%{top: 600px;}

  66%{top: -600px;}

}

@-webkit-keyframes slide4{

  0%{top: -600px;}

  60%{top: -600px;}

  65%{top: 0;}

  80%{top: 0;}

  85%{top: 600px;}

  86%{top: -600px;}

}