html+css实现轮播

初学html和css，照葫芦画瓢实现无js的轮播，主要借鉴了以下两个博客：
http://www.jianshu.com/p/28643f36011e
http://www.cnblogs.com/HLX1992/p/5910265.html
主要就是利用了overflow的hidden和animation属性，宽度只要改slider的width就行了。animation时间的计算还有延时可以参考http://www.jianshu.com/p/28643f36011e，作者讲的很详细，不过他和我实现的方法和效果都不一样。以下是代码：

样式

* {
    margin:0;
    padding:0;
}
.slider {
    position:relative;
    margin:0 auto;
    width:100%;
    height:360px;
    text-align:center;
    overflow:hidden;
}
.slider-list {
    position:relative;
    padding:0;
    width:100%;
    animation: sliderFade 11s linear 0s infinite normal;
    -webkit-animation:sliderFade 11s linear 0s infinite normal;
}
/*鼠标放在上面动画会暂停*/
.slider:hover .slider-list {
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
}
.slider:hover .focus-item {
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
}
@keyframes sliderFade {
    0% {
        right:0;
    }
    27% {
        right:0;
    }
    36% {
        right:100%;
    }
    63% {
        right:100%;
    }
    73% {
        right:200%;
    }
    100% {
        right:200%;
    }
}
.slider-item {
    position:absolute;
    list-style:none;
    width:100%;
    height:360px;
}
.slider-item1 {
    background-color:red;
}
.slider-item2 {
    background-color:green;
    left:100%;
}
.slider-item3 {
    background-color:yellow;
    left:200%;
}
.focus-item {
    float:right;
    list-style:none;
    width:10px;
    height:10px;
    z-index:4;
    border-radius:50%;
    background-color:white;
    margin-right:10px;
    animation: focusFade 11s linear 0 infinite normal;
    -webkit-animation:focusFade 11s linear;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}
.focus-item + .focus-item {
    /*opacity:0.5;*/
}
/*焦点定位*/
.focus-list {
    position:absolute;
    width:60px;
    bottom:10px;
    left:50%;
}
/*焦点延时*/
.focus-item2 {
    animation-delay:4s;
    -webkit-animation-delay:4s;
}
.focus-item3 {
    animation-delay:8s;
    -webkit-animation-delay:8s;
}
/*焦点循环*/
@keyframes focusFade {
    0% {
        background-color:black;
    }
    27% {
        background-color:black;
    }
    36% {
        background-color:white;
    }
    100% {
        background-color:white;
    }
}