How about this Fiddle
#container{
background:green;
width:300px;
height:300px;
overflow:hidden;
}
.img{
-webkit-animation:up 20s infinite;
}
.img{
height:300px;
}
@-webkit-keyframes up{
0%{transform:translate(0,0)}
20%{transform:translate(0,-300px)}
40%{transform:translate(0,-600px)}
60%{transform:translate(0,-900px)}
80%{transform:translate(0,-1200px)}
100%{transform:translate(0,-1500px)}
}
<div id="container">
<div class="img ">
<img src="http://placekitten.com/300/301">
</div>
<div class="img ">
<img src="http://placekitten.com/300/302">
</div>
<div class="img ">
<img src="http://placekitten.com/300/303">
</div>
<div class="img ">
<img src="http://placekitten.com/300/304">
</div>
<div class="img ">
<img src="http://placekitten.com/300/305">
</div>
<div class="img ">
<img src="http://placekitten.com/300/306">
</div>
</div>
solved How to create a pure css slideshow? [closed]