CSS3 animation responsive slider

by tea4two

HTML

<div id="slider">
<ul>
    <li id="slide01"><a href="#"></a></li>
    <li id="slide02"><a href="#" id=""></a></li>
    <li id="slide03"><a href="#" id=""></a></li>
    <li id="slide04"><a href="#" id=""></a></li>
    <li id="slide05"><a href="#" id=""></a></li>
</ul>
    </div>

CSS

* {margin: 0; padding: 0; list-style: none;}

#slider {
    width: 100%;
    position: relative;
    overflow: hidden;
}
#slider ul {
    position: relative;
    height: 400px;
}
#slider ul li {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 400px;
}
#slider ul li a {
    display: block;
    text-indent: -9999px;
    height: 100%;

}
#slide01 {
    background: url(http://lorempixel.com/1200/400/sports/1/) no-repeat center 0; 
    -webkit-animation: anim01 20s infinite;
    -moz-animation: anim01 20s infinite;
    animation: anim01 20s infinite;
}

#slide02 {
    background: url(http://lorempixel.com/1200/400/sports/2/) no-repeat center 0;
    -webkit-animation: anim02 20s infinite;
    -moz-animation: anim02 20s infinite;
    animation: anim02 20s infinite;
}
#slide03 {
    background: url(http://lorempixel.com/1200/400/sports/3/) no-repeat center 0;
    -webkit-animation: anim03 20s infinite;
    -moz-animation: anim03 20s infinite;
    animation: anim03 20s infinite;
}
#slide04 {
    background: url(http://lorempixel.com/1200/400/sports/4/) no-repeat center 0;
    -webkit-animation: anim04 20s infinite;
    -moz-animation: anim04 20s infinite;
    animation: anim04 20s infinite;
}
#slide05 {
    background: url(http://lorempixel.com/1200/400/sports/5/) no-repeat center 0;
    -webkit-animation: anim05 20s infinite;
    -moz-animation: anim05 20s infinite;
    animation: anim05 20s infinite;
}

@-webkit-keyframes anim01 {
    0% { left: 0; }
    15% { left: 0; }
    20% { left: -100%;}
    20.1% { left: 100%; }
    
    95% { left: 100%; }
    100% { left: 0; }
}
@-webkit-keyframes anim02 {
    0% { left: 100%; }
    15% { left: 100%; }
    20% { left: 0;}
    35% { left: 0;}
    40% { left: -100%;}
    40.1{left: 100%;}
    
    100% { left: 100%; }
}
@-webkit-keyframes anim03 {
    0% { left: 100%; }
    35% { left: 100%;}
    40% { left: 0;}
    55% {left: 0;}
    60% { left: -100%; }
    60.1% { left: 100%; }
    
    100% {...