这里是结果，因为你可以看到它在jsfiddle上工作，因为图像被翻译，在视口上有活动图像可以看到先前图像的某些部分。
https://jsfiddle.net/bhavikbamania/953autk5/
<html>
<body>
<header>
<div>
<img src="http://schedule.wttw.com/ulphoto/wttw_1342026073.jpg">
<img src="2.jpg" alt="White-tailed kite">
<img src="http://trash-russia.com/wp-content/uploads/2014/10/national-geographic-photo-contest-wild-nature-of-russia-2014.jpg">
<img src="http://caucasus-naturefund.org/wp-content/uploads/2012/11/800x400_lagodekhi.jpg">
<img src="https://blog.virgin-atlantic.com/t5/image/serverpage/image-id/3616i3B87C94B15C8EADF?v=mpbl-1">
</div>
</header>
</body>
</html>
的CSS
header { border: 1px solid black; background: #000 }
header, div img { width: 800px; height: 341px; }
header { overflow: hidden; }
div { width:4000px; }
/* slider code */
@-webkit-keyframes slider {
0% { -webkit-transform: translateX(0px); }
20% { -webkit-transform: translateX(0px); }
25% { -webkit-transform: translateX(-800px); }
45% { -webkit-transform: translateX(-800px); }
50% { -webkit-transform: translateX(-1600px); }
70% { -webkit-transform: translateX(-1600px); }
75% { -webkit-transform: translateX(-2400px); }
95% { -webkit-transform: translateX(-2400px); }
100% { -webkit-transform: translateX(-3200px); }
}
div {
-webkit-animation-name: slider;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-name: slider;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}