cssのみで作る自動無限スクロールスライド

同じスライドを2つ並べている。一つ目のスライドはスライドが画面に表示されている状態から、画面から消えるまでスクロールする。二つ目は画面の外（ギリギリ見えない状態）から、一つ目のスライドの最初の状態までスクロールする。二つのスライドをこのように動かすことで無限ループに見せている。

DEMO

See the Pen infinite scroll by mk668a (@mk668a) on CodePen.

CODE

index.html

<div class="infinity-slide">
<!--   同じスライドを二つ表示 -->
    <div id="slide">
      <img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_1280.jpg">
    </div>
    <div id="slide">
      <img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_1280.jpg">
    </div>
</div>

style.css

.infinity-slide{
  display: flex; /* 二つのスライドを横に並べる */
  width: 50vw;
  margin: 0 25vw;
  background: gray;
  overflow: hidden;
}

#slide {
  animation: infinity-loop 10s infinite linear 1s both; /* 無限ループアニメーションの設定 */
  display: flex; /* スライドの要素を横に並べる */
  width: 50vw;
  height: 100px;
  position: relative;
}

#slide img{
  height: 100%;
  width: auto；
}

/* 無限ループアニメーション */
@keyframes infinity-loop {
  from {
    transform: translateX(0vw);
  }
  to {
    transform: translateX(-50vw);
  }
}

他にいい案があれば教えていただきたいですねええええ