http://uranaka-shobou.com/css-slideshow/　　CSSで作るスライドショーのCSS

style.css

#aspslide{
      position: relative;
      width: 300px;
      height: 250px;
      overflow:hidden;
      padding:0!important;
}

.asnakami{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding:0!important;
}   


#asnakami1{
      -moz-animation: fadeinout 30s 0s infinite both;
      -webkit-animation: fadeinout 30s 0s infinite both;
      -o-animation: fadeinout 30s 0s infinite both;
      animation: fadeinout 30s 0s infinite both;
      z-index:6;
}

#asnakami2{
      -moz-animation: fadeinout 30s 5s infinite both;
      -webkit-animation: fadeinout 30s 5s infinite both;
      -o-animation: fadeinout 30s 5s infinite both;
      animation: fadeinout 30s 5s infinite both;
      z-index:5;
}

#asnakami3{
      -moz-animation: fadeinout 30s 10s infinite both;
      -webkit-animation: fadeinout 30s 10s infinite both;
      -o-animation: fadeinout 30s 10s infinite both;
      animation: fadeinout 30s 10s infinite both;
      z-index:4;
}

#asnakami4{
      -moz-animation: fadeinout 30s 15s infinite both;
      -webkit-animation: fadeinout 30s 15s infinite both;
      -o-animation: fadeinout 30s 15s infinite both;
      animation: fadeinout 30s 15s infinite both;
      z-index:3;
}

#asnakami5{
      -moz-animation: fadeinout 30s 20s infinite both;
      -webkit-animation: fadeinout 30s 20s infinite both;
      -o-animation: fadeinout 30s 20s infinite both;
      animation: fadeinout 30s 20s infinite both;
      z-index:2;
}

#asnakami6{
      -moz-animation: fadeinout 30s 25s infinite both;
      -webkit-animation: fadeinout 30s 25s infinite both;
      -o-animation: fadeinout 30s 25s infinite both;
      animation: fadeinout 30s 25s infinite both;
      z-index:1;
}

@-moz-keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}

@-webkit-keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}

@-o-keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}

@keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}