SOURCE

<div class="window">
	<div class="slide">
        <div class="s1">1111111111111</div>
        <div class="s2">2222222222222</div>
        <div class="s3">3333333333333</div>
        <!-- 实在不会了，没招了，只能再加一个与第一个相同的 -->
        <!-- 切到第三个再往左就没有东西了，空白了 -->
        <div class="s1">1111111111111</div>
    </div>
</div>

.window{
    height: 200px;
    width:200px;
    border: 1px solid black;
    overflow:hidden;
}
.slide{
    height:200px;
    width:800px;//里边图片总长度
}
.slide>div{
    height:200px;
    width:200px;
    float:left;
    animation: move 5s infinite ;
}

div.s1{
    background: lightseagreen;

}
div.s2{
    background: lightslategray;
    
}
div.s3{
    background: deeppink;
   
}
@keyframes move{
    0%{
        transform: translateX(0);
    }
    25%{
        transform:translateX(-200px);
    }
    50%{
        transform: translateX(-400px);
    }
    75%{
        transform: translateX(-600px);
    }
    /* 这里用来在切换到第四个时，将位置重置以掩盖空白 */
    75.00001%{
        transform:translateX(0);
    }
}