cssだけで画像が無限に流れるスライダー

htmlは以下。1,2,3を流したいなら、画像1,2,3のセットを2つ用意して横に並べておく。

<div class="flowImages">
  <div class="overlay -left"></div>
  <div class="contents">
    <ul>
      <li><img src="https://placehold.jp/3d4070/ffffff/300x150.png?text=1" alt=""></li>
      <li><img src="https://placehold.jp/3d4070/ffffff/300x150.png?text=2" alt=""></li>
      <li><img src="https://placehold.jp/3d4070/ffffff/300x150.png?text=3" alt=""></li>
    </ul>
    <ul>
      <li><img src="https://placehold.jp/3d4070/ffffff/300x150.png?text=1" alt=""></li>
      <li><img src="https://placehold.jp/3d4070/ffffff/300x150.png?text=2" alt=""></li>
      <li><img src="https://placehold.jp/3d4070/ffffff/300x150.png?text=3" alt=""></li>
    </ul>
  </div>
  <div class="overlay -right"></div>
</div>

cssの基本は、画像1,2,3のセットをflexで横にしてはみ出しをoverflow:hiddenで許可。セット内でも画像を横並びにするためflex、アニメーションはここ（ul）につける。動き自体は単純。左から右へ動かし続けるだけ。
widthはliに対して設定。アイテム間のマージンもここで付与。

.contents {
    display: flex;
    overflow: hidden;
    ul {
      display: flex;
      animation :toLeft 70s infinite linear 0.5s both;
      @keyframes toLeft {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-100%);
        }
      }
      li {
        margin-right: 20px;
        width: 250px;
      }
    }
  }

右→左へ流したい場合は以下のように。マイナス指定から0に戻るように書く

animation: toRight 70s infinite linear 0.5s;
  @keyframes toRight {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

左右に消えていく演出をしたい場合、overlayのdivを使う。グラデーションで白→透過の指定をいれておき、左右にabsoluteで設置するだけ。

.overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 50px;
    height: 100%;
    &.-left {
      left: 0;
      background: linear-gradient(90deg, #fff 0%, rgba(225,225,225,0) 100%)
    }
    &.-right {
      right: 0;
      background: linear-gradient(270deg, #fff 0%, rgba(225,225,225,0) 100%)
    }
  }