我如何让一个对象无限期地向下滑动，而不是反弹回来，当它触及底部

Question

我有一组我要滑动的图像。我希望它们在触底时在屏幕顶部重新启动，而不是弹回来然后又弹回来。我怎样才能做到这一点呢?

CSS

.box-buttons { 
width:70%;height:750px;background-color:grey;float:left;margin: 30px 3%;
border: 1px solid black;overflow:hidden
}
.object {
animation: slide 9s linear infinite;
position: relative;
left: 0;
bottom: 0;
}

@keyframes slide {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(500px);
}
}

html

<div class="box-buttons"><div class="object">
<img class=spam-button-size src=buttons/cs3.gif><img class=spam-button-size src=buttons/opposingforce.gif> <img class=spam-button-size src=buttons/snakes.gif><img class=spam-button-size src=buttons/sprunk.gif><img class=spam-button-size src=buttons/web3.gif><img class=spam-button-size src=buttons/piracy.gif><img class=spam-button-size src=buttons/3dfx_banner.gif><img class=spam-button-size src=buttons/linuxnow.gif><img class=spam-button-size src=buttons/hack.gif><img class=spam-button-size src=buttons/china2.gif><img class=spam-button-size src=buttons2/thoughtcrimes.png><img class=spam-button-size src=buttons2/28.gif><img class=spam-button-size src=buttons2/anime.jpeg><img class=spam-button-size src=buttons2/anime2.gif>
</div>

https://i.stack.imgur.com/XVddd.png

Answer 1

你需要改变css这样的动画应该是好的。

@keyframes slide {
0% {
transform: translateY(0);
}
100% {
transform: translateY(500px);
}
}