纯css3无缝滚动

纯css3无缝向左滚动：

HTML：

<div class="marqueCon">
    <div class="marque">
        <img src="data:images/index1.jpg" alt="">
        <img src="data:images/index2.jpg" alt="">
        <img src="data:images/index3.jpg" alt="">
        <img src="data:images/index4.jpg" alt="">
        <img src="data:images/index5.jpg" alt="">
        <img src="data:images/index1.jpg" alt="">
        <img src="data:images/index2.jpg" alt="">
        <img src="data:images/index3.jpg" alt="">
        <img src="data:images/index4.jpg" alt="">
        <img src="data:images/index5.jpg" alt="">
    </div>
</div>  
//注意图片要有重合

CSS:

        .marqueCon{
            width:1100px;
            margin:0 auto;
            overflow:hidden;
        }
        .marque{
            width:2200px;  //宽度是marqueCon宽度的二倍
            margin:0 auto;
            animation:leftM 15s linear infinite;
        }
        .marque:after{
            content:"";
            display:block;
            clear:both;
        }
        .marque:hover{
            animation-play-state:paused;
        }
        .marque img{
            margin:5px;
            float:left;
            display:block;
            width:210px;
        }
        @keyframes leftM{
            0%{transform:translateX(0px);}
            25%{transform:translateX(-200px);}
            50%{transform:translateX(-500px);}
            75%{transform:translateX(-800px);}
            100%{transform:translateX(-1100px);} //滑动到最左边，即marque宽度的一半

 }