無限アニメーション

August 5, 2025

無限アニメーションを作ってみたいんだけど〜どうしたらいいかな？

いいよ♪やってみよう！

無限アニメーション

See the Pen Untitled by ちいうさ (@zqnixpal-the-looper) on CodePen.

解説

HTML

<div id="js-images-scroll" class="images-scroll">
<div id="js-images" class="images">
          <div class="image01">
            <img src="https://picsum.photos/id/237/200/300" alt="" />
          </div>
          <div class="image02">
            <img
              src="https://picsum.photos/id/200/200/300"
              alt=""
              width="200"
              height="300"
            />
          </div>
          <div class="image03">
            <img
              src="https://picsum.photos/id/220/200/300"
              alt=""
              width="200"
              height="300"
            />
          </div>
          <div class="image04">
            <img
              src="https://picsum.photos/id/60/200/300"
              alt=""
              width="200"
              height="300"
            />
          </div>
          <div class="image05">
            <img
              src="https://picsum.photos/id/54/200/300"
              alt=""
              width="200"
              height="300"
            />
          </div>
          <div class="image06">
            <img
              src="https://picsum.photos/id/37/200/300"
              alt=""
              width="200"
              height="300"
            />
          </div>
          <div class="image07">
            <img
              src="https://picsum.photos/id/90/200/300"
              alt=""
              width="200"
              height="300"
            />
          </div>
          <div class="image08">
            <img
              src="https://picsum.photos/id/120/200/300"
              alt=""
              width="200"
              height="300"
            />
          </div>
        </div>
      </div>

1列レイアウトで8枚の画像を配置

CSS

.images-scroll {
  --image-gap: 20px;

  width: fit-content;
  display: flex;
  gap: var(--image-gap);
  animation: infinity-scroll-left 10s linear both infinite;
}

@keyframes infinity-scroll-left {
  from {
    translate: 0 0;
  }

  to {
    translate: calc(-1 * (var(--images-width) + var(--image-gap))) 0;
  }
}

.images {
  display: grid;
  gap: var(--image-gap);
  grid-template-columns: repeat(8, 200px);
  padding-block: 10vh;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }
}

.image1 {
  grid-column: 1 / span 1;
}

.image2 {
  grid-column: 2 / span 1;
}

.image3 {
  grid-column: 3 / span 1;
}

.image4 {
  grid-column: 4 / span 1;
}

.image5 {
  grid-column: 5 / span 1;
}

.image6 {
  grid-column: 6 / span 1;
}

.image7 {
  grid-column: 7 / span 1;
}

.image8 {
  grid-column: 8 / span 1;
}

.images-scroll にアニメーション（infinity-scroll-left）を指定。
画像全体の幅（-images-width）分だけ左に動かすことで、画像が左に流れる。

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const imagesScroll = document.querySelector("#js-images-scroll"); // 無限アニメーション対象の要素を取得
  const images = document.querySelector("#js-images"); // 無限アニメーションの1週分の要素を取得
  const imagesWidth = images.scrollWidth; // 幅を取得
  console.log("imagesWidth:", imagesWidth);

  // itemsを複製
  const imagesClone = images.cloneNode(true); // imagesを複製
  imagesScroll.appendChild(imagesClone); // 複製した要素をimagesScrollに追加
  imagesClone.classList.add("is-clone"); // is-cloneクラスを追加

  imagesScroll.style.setProperty("--images-width", `${imagesWidth}px`); // CSS変数にセット
});

画像8枚のセットをまるごと複製し、後ろに追加します。
画像が1周分流れても、すぐ次の同じ画像セットが続く＝「無限」に見える。
画像全体の幅をCSS変数にセットし、アニメーションの移動距離に使います。

水平方向の無限アニメーション（2段）

See the Pen 水平方向の無限アニメーション by ちいうさ (@zqnixpal-the-looper) on CodePen.

解説

HTML 

<div id="js-images-scroll" class="images-scroll">
        <div id="js-images" class="images">
          <div class="image01">
            <img
              src="https://picsum.photos/id/237/200/300"
              alt=""
              width="292"
              height="228">
          </div>
          <div class="image02">
            <img
              src="https://picsum.photos/id/200/200/300"
              alt=""
              width="292"
              height="228">
          </div>
          <div class="image03">
            <img
              src="https://picsum.photos/id/220/200/300"
              alt=""
              width="292"
              height="228">
          </div>
          <div class="image04">
            <img
              src="https://picsum.photos/id/60/1200/800"
              alt=""
              width="500"
              height="488">
          </div>
          <div class="image05">
            <img
              src="https://picsum.photos/id/54/200/300"
              alt=""
              width="292"
              height="228">
          </div>
          <div class="image06">
            <img
              src="https://picsum.photos/id/37/200/300"
              alt=""
              width="292"
              height="228">
          </div>
          <div class="image07">
            <img
              src="https://picsum.photos/id/90/200/300"
              alt=""
              width="292"
              height="488">
          </div>
          <div class="image08">
            <img
              src="https://picsum.photos/id/120/1200/800"
              alt=""
              width="500"
              height="488">
          </div>
        </div>
      </div>

8列×2行のGridレイアウトで8枚の画像を配置

CSS

.images-scroll {
  --image-gap: 20px;

  width: fit-content;
  display: flex;
  gap: var(--image-gap);
  animation: infinity-scroll-left 10s linear both infinite;
}

@keyframes infinity-scroll-left {
  from {
    translate: 0 0;
  }

  to {
    translate: calc(-1 * (var(--images-width) + var(--image-gap))) 0;
  }
}

.images {
  display: grid;
  gap: var(--image-gap);
  grid-template-columns: repeat(8, 200px);
  padding-block: 10vh;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }
}

.image1 {
  grid-column: 1 / span 1;
}

.image2 {
  grid-column: 2 / span 1;
}

.image3 {
  grid-column: 3 / span 1;
}

.image4 {
  grid-column: 4 / span 1;
}

.image5 {
  grid-column: 5 / span 1;
}

.image6 {
  grid-column: 6 / span 1;
}

.image7 {
  grid-column: 7 / span 1;
}

.image8 {
  grid-column: 8 / span 1;
}

.images-scroll にアニメーション（infinity-scroll-left）を指定。

画像全体の幅（-images-width）分だけ左に動かすことで、画像が左に流れる。

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const imagesScroll = document.querySelector("#js-images-scroll"); // 無限アニメーション対象の要素を取得
  const images = document.querySelector("#js-images"); // 無限アニメーションの1週分の要素を取得
  const imagesWidth = images.scrollWidth; // 幅を取得
  console.log("imagesWidth:", imagesWidth);

  // itemsを複製
  const imagesClone = images.cloneNode(true); // imagesを複製
  imagesScroll.appendChild(imagesClone); // 複製した要素をimagesScrollに追加
  imagesClone.classList.add("is-clone"); // is-cloneクラスを追加

  imagesScroll.style.setProperty("--images-width", `${imagesWidth}px`); // CSS変数にセット
});

画像8枚のセットをまるごと複製し、後ろに追加します。
画像が1周分流れても、すぐ次の同じ画像セットが続く＝「無限」に見える。
画像全体の幅をCSS変数にセットし、アニメーションの移動距離に使います。