只有 CSS 的无限轮播循环

如何解决只有 CSS 的无限轮播循环

有人对如何在视频中创建这样的循环轮播有任何想法吗？我创建了一个，但它崩溃并滚动。

https://drive.google.com/file/d/1Chh4cNkxHKznvpkZ6RR6th1XhsfqFZw9/view

这是我的

结构

  <div class="container">
        <div class="scroller">
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
          <div class="img"><img src="https://picsum.photos/200/300" alt=""></div>
      </div></div>

...和 ​​css

.container {
    height: 200px;
    overflow-x: hidden;
    position: relative;
  }
  
  .scroller {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(14,300px);
    gap: 16px;
    animation: scrollLeft 25s linear infinite;
  }

  
  @keyframes scrollLeft {
    to {
      transform: translateX(-50%)
    }
  }
  
  .img {
    width: 300px;
    height: 200px;
  }
  
  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5%;
    
  }



  

https://jsfiddle.net/jLs97t6x/3/