<p>right to left</p>
<div class="slider r_to_l">
    <div class="slider_inner">
      <!--サンプルのため画像ではなく、塗りつぶしでのサンプルになります-->
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="slider_inner">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
<p>left to right</p>
<div class="slider l_to_r">
    <div class="slider_inner">
      <!--サンプルのため画像ではなく、塗りつぶしでのサンプルになります-->
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="slider_inner">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
.slider_inner div{
  width:20%;
  height:200px;
}
.slider_inner div:nth-of-type(1){ background:#aedaed; }
.slider_inner div:nth-of-type(2){ background:#eee; }
.slider_inner div:nth-of-type(3){ background:#53edfe; }
.slider_inner div:nth-of-type(4){ background:#e3edfe; }
.slider_inner div:nth-of-type(5){ background:#ced; }
/**↑↑塗りつぶし※画像の代わり、スライダーの設定には関係ない**/

/**スライダー設定 共通css**/
.slider{ display:flex; width:100vw; }
.slider_inner{ min-width:100vw; display:flex; }

/**右から左に動かすアニメーション**/
.r_to_l .slider_inner:first-of-type{ animation: reverse-loop 50s -25s linear infinite; }
.r_to_l .slider_inner:last-of-type{ animation: reverse-loop2 50s linear infinite; }

@keyframes reverse-loop {
    0% { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}
@keyframes reverse-loop2 {
    0% { transform: translateX(0%); }
    to { transform: translateX(-200%); }
}

/**左から右に動かすアニメーション**/
.l_to_r .slider_inner:first-of-type{ animation: loop 50s -25s linear infinite; }
.l_to_r .slider_inner:last-of-type{ animation: loop2 50s linear infinite; }

@keyframes loop {
    0% { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
@keyframes loop2 {
    0% { transform: translateX(-200%); }
    to { transform: translateX(0); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.