Image collage in react with auto scroll in a loop

Question

I am building an image collage in react 18. The requirement is that collage should keep on scrolling slowly in a loop i.e. infinite. The images in the collage are dynamic and new image can be added while it is scrolling.

So far my approach is to use a container with the all images in it and use translateY to animate it slowly top to bottom. What my struggle is that to run it infinite.

{<div className="collage-container">
  images.map((i, idx) => {
    <img src={i.image}/>
  }
</div>}

CSS

.collage-container {
  .column-count: 3

  img {
    width: 100%;
  }
}

.scroll-y {
  animation: scroll-vertical 30s infinite linear;
}

@keyframes scroll-vertical {
  0% { transform: translateY(0%); }
  100% { transform: translateY(-100%); }
}