横方向に流れ続けるスライドを実装する

横方向に要素をスクロールし続けるという実装をすることがたまにあるので、CSSを使った実装方法をメモしておきます。

サンプルコード

まずはHTMLです。
.x-scroll_innerが横にスクロールする要素になります。

<div class="x-scroll">
  <div class="x-scroll_inner">
    <div class="x-scroll_block">
      <div class="x-scroll_item">1</div>
      <div class="x-scroll_item">2</div>
      <div class="x-scroll_item">3</div>
      <div class="x-scroll_item">4</div>
      <div class="x-scroll_item">5</div>
    </div>
    <!-- ループ・画面幅が広い時用に同じ内容を適宜複製 -->
    〜 略 〜
  </div>
</div>

.x-scroll_block内にスクロールで使用する要素を全て格納して、ループして流す用に最低1つ以上複製します。
.x-scroll_blockの内容が少ない場合、画面幅が広い時に足りない場合があるので適宜複製を増やしてください。

次にCSSです。

.x-scroll {
	width: 100%;
	overflow: hidden;
}
.x-scroll_inner {
	display: flex;
	animation: 15s linear infinite xScroll;
}
@keyframes xScroll {
	0%     { transform: translateX(0);}
	100% { transform: translateX(-1700px);} /* .x-scroll_block 1つ分の幅だけ動かす */
}
.x-scroll_block {
	display: flex;
	width: 1700px; /* (320px + 20px) + 5 */
}
.x-scroll_item {
	width: 320px;
	height: 180px;
	margin: 10px;
}

.x-scroll_blockには内容量に応じてwidthに固定幅を指定、その固定幅分だけ.x-scroll_innerをanimationで動かします。
横方向へのスクロールのループのデモページ