How can I make this infinite carousel work?

Question

I have this carousel that needs a simple operation: appear infinite. The problem is that the animation cuts off and leaves a blank space at the end of the last element. I leave the code below and hope someone can help me.

.slider {
    padding-top: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.slider-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    animation: scroll 30s linear infinite;
}

@keyframes scroll {

    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.slider-items img {
    width: 12%;
    margin: 40px;
    filter: grayscale(100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div className="slider pb-12">
  <div className="slider-items">
    <img src="https://picsum.photos/id/237/200/300" alt="" />
    <img src="https://picsum.photos/seed/picsum/200/300" alt="" />
    <img src="https://picsum.photos/200/300?grayscale" alt="" />
    <img src="https://picsum.photos/200/300/?blur" alt="" />
    <img src="https://picsum.photos/200/300.jpg" alt="" />
    <img src="https://picsum.photos/id/237/200/300" alt="" />
    <img src="https://picsum.photos/seed/picsum/200/300" alt="" />
    <img src="https://picsum.photos/200/300?grayscale" alt="" />
    <img src="https://picsum.photos/seed/picsum/200/300" alt="" />
    <img src="https://picsum.photos/200/300?grayscale" alt="" />
    <img src="https://picsum.photos/200/300.jpg" alt="" />
    <img src="https://picsum.photos/id/237/200/300" alt="" />
  </div>
</div>

I tried cloning the content, using sass, changing the seconds the animation lasts, the width of all the containers, changing the HTML structure and nothing works for me.

Answer 1

I added images and a container (which you were missing I think).

Pay attention to the 100% keyframe where half of the flex gap (or maybe half of the parent padding ? well you should test it :D) must be taken into account if you want the the animation to look smooth :)

.slider {
  padding: 20px;
  overflow: hidden;
  background: grey;
}
.slider-items-container {
  display: contents;
  
}
.slider-items {
  gap: 20px;
  display: inline-flex;
  flex-wrap: no-wrap;
  animation: scroll 5s linear infinite;
}

img {
  width: 200px;
  height: 150px;
}

@keyframes scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(calc(-50% - 10px));
    }
}

<div class="slider">
  <div class="slider-items-container">
    <div class="slider-items">
      <img src="https://img.freepik.com/psd-gratuit/lettres-argent-facade-du-batiment-verre_145275-162.jpg?size=626&ext=jpg&ga=GA1.1.1546980028.1711411200&semt=sph" alt="" />
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/M%C3%BCnster%2C_LVM%2C_B%C3%BCrogeb%C3%A4ude_--_2013_--_5149-51.jpg" alt="" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5VDK6xeSfkbgUbiwQPLF6sxWYBrQTfcgyn6qUv4l11w&s" alt="" />
      <img src="https://media.istockphoto.com/id/178447404/fr/photo/b%C3%A2timents-daffaires-moderne.jpg?s=612x612&w=0&k=20&c=KDgacnz516dO2YiaMsiyHABoHaBhv5K1CRjHUEbcviQ=" alt="" />
      <img src="https://images.lawpath.com.au/2020/06/sean-pollock-PhYq704ffdA-unsplash-scaled.jpg" alt="" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHsRbGBlz2CdOJ0WmplUX-0zqZ-jqG3JY74W7OyCG6EA&s" alt="" />
      <img src="https://img.freepik.com/psd-gratuit/lettres-argent-facade-du-batiment-verre_145275-162.jpg?size=626&ext=jpg&ga=GA1.1.1546980028.1711411200&semt=sph" alt="" />
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/M%C3%BCnster%2C_LVM%2C_B%C3%BCrogeb%C3%A4ude_--_2013_--_5149-51.jpg" alt="" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5VDK6xeSfkbgUbiwQPLF6sxWYBrQTfcgyn6qUv4l11w&s" alt="" />
      <img src="https://media.istockphoto.com/id/178447404/fr/photo/b%C3%A2timents-daffaires-moderne.jpg?s=612x612&w=0&k=20&c=KDgacnz516dO2YiaMsiyHABoHaBhv5K1CRjHUEbcviQ=" alt="" />
      <img src="https://images.lawpath.com.au/2020/06/sean-pollock-PhYq704ffdA-unsplash-scaled.jpg" alt="" />
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHsRbGBlz2CdOJ0WmplUX-0zqZ-jqG3JY74W7OyCG6EA&s" alt="" />
    </div>
  </div>
</div>