如何在使用 translateX() 在滑块中设置动画时完全隐藏之前的图像？

Question

这是结果，因为您可以看到它在 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;
 }

Answer 1

只需将 float:left; 添加到您的图片中

FIDDLE

如何在使用 translateX() 在滑块中设置动画时完全隐藏之前的图像？

How to hide the previous image completely while animating in a slider using translateX()?

html

css

css-transforms