CSSのみで実装する無限スクロールアニメーション

公開日：2025.03.31

無限スクロールアニメーションをCSSのみで実装しようと調べてみましたが、画像のサイズが画面の均等分割だったり、途中でループが止まったりと自分が欲しいものがありませんでした。

なので自分が理想とする無限スクロールを作ったので公開します。

デモはこちらです

CSSのみで無限スクロールアニメーションを実装する方法

早速コードはこちら。基本コピペで大丈夫です。

html／CSSのコード

index.html

<div class="infinite-scroll">
  <div class="infinite-scroll__container">
    <div class="infinite-scroll__img-wrap">
      <img src="https://it-web.jp/images/photo/x01.webp" />
    </div>
    <div class="infinite-scroll__img-wrap">
      <img src="https://it-web.jp/images/photo/x02.webp" />
    </div>
    <div class="infinite-scroll__img-wrap">
      <img src="https://it-web.jp/images/photo/x03.webp" />
    </div>
    <div class="infinite-scroll__img-wrap">
      <img src="https://it-web.jp/images/photo/x04.webp" />
    </div>
    <!-- 必要な長さ分繰り返してください。 -->
  </div>
  <div class="infinite-scroll__container">
    <div class="infinite-scroll__img-wrap">
      <img src="https://it-web.jp/images/photo/x01.webp" />
    </div>
    <div class="infinite-scroll__img-wrap">
      <img src="https://it-web.jp/images/photo/x02.webp" />
    </div>
    <div class="infinite-scroll__img-wrap">
      <img src="https://it-web.jp/images/photo/x03.webp" />
    </div>
    <div class="infinite-scroll__img-wrap">
      <img src="https://it-web.jp/images/photo/x04.webp" />
    </div>
    <!-- 必要な長さ分繰り返してください。 -->
    </div>
  </div>
</div>

style.css

.infinite-scroll {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.infinite-scroll__container {
  display: flex;
  gap: 20px; //img要素感の隙間
  padding-right: 20px; //container要素感の隙間
  flex-shrink: 0;

  @media screen and (max-width: 768px) {
    gap: 0.8rem;
    padding-right: 0.8rem;
  }
}

.infinite-scroll__img-wrap {
  flex-shrink: 0;
  width: 300px; //画像の幅調整
  height: auto;
  @media screen and (max-width: 768px) {
    width: 16.2rem;
  }
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}

.infinite-scroll__container:first-child {
  animation: loop 80s -40s linear infinite;
}

.infinite-scroll__container:last-child {
  animation: loop2 80s linear infinite;
}

解説

.infinite-scroll__containerを2つ用意します。これらの内容は同じにする場合が多いと思います。.infinite-scroll__containerの中身は想定される画面幅を超える要素を入れてください。足りなければ足りない分複製して下さい。

<img>タグは<div>タグで囲んで下さい。最初は<div>タグ忘れて表示が崩れたりしてました。やっぱり<img>タグは<div>タグで囲むのが正解ですね。特に親がdisplay:flex;の場合はなおさら。

.infinite-scrollと.infinite-scroll__containerはflexで横並びにしています。gapとpadding-rightで要素感の間隔を調整して下さい。

@keyframes loop {
  0% {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}

.infinite-scroll__container:first-child {
  animation: loop 80s -40s linear infinite; 
}

.infinite-scroll__container:last-child {
  animation: loop2 80s linear infinite;
}

loopとloop2でそれぞれ前半、後半の.infinite-scroll__containerの位置を調整しています。loopは100%から-100%まで、loop2は0%から-200%まで。そして、loopでは80秒のループに対して40秒の地点、すなわち0%の状態からスタートするようにしています。

これで無限ループの完成です。