纯css3动画，实现图片轮播

重点：定义动画时的百分比间隔，与使用动画时延时设置

<style>
    @-webkit-keyframes fadeIn{
    0%{opacity:0;}5%{opacity:1;}35%{opacity:1;}40%{opacity:0;}100%{opacity:0;}
    }
    @-moz-keyframes fadeIn{
    0%{opacity:0;}5%{opacity:1;}35%{opacity:1;}40%{opacity:0;}100%{opacity:0;}
    }
    @keyframes fadeIn{
    0%{opacity:0;}5%{opacity:1;}35%{opacity:1;}40%{opacity:0;}100%{opacity:0;}
    }

    .CssSlider{
        height: 456px; width: 300px; overflow: hidden; position: relative; margin: 50px auto;
    }
    .CssSlider img{
        position: absolute; left: 0; top:0; z-index: 0;
    }
    img.slider01{
        -webkit-animation:fadeIn 15s ease infinite both;-moz-animation:fadeIn 15s ease infinite both;animation:fadeIn 15s ease infinite both;
    }
    img.slider02{
        -webkit-animation:fadeIn 15s ease 5s infinite both;-moz-animation:fadeIn 15s ease 5s infinite both;animation:fadeIn 15s ease 5s infinite both;
    }
    img.slider03{
        -webkit-animation:fadeIn 15s ease 10s infinite both;-moz-animation:fadeIn 15s ease 10s infinite both;animation:fadeIn 15s ease 10s infinite both;
    }
</style>
<div class="CssSlider">
    <img src="1.jpg" class="slider01" alt="">
    <img src="2.jpg" class="slider02" alt="">
    <img src="3.jpg" class="slider03" alt="">
</div>