CSSアニメーションで画像を無限ループさせる方法｜右から左へ流れるスライダーの実装

ホームページでは、複数の画像などを横方向へ自動的に流し続ける「無限ループアニメーション」が使われることがあります。

例えば、

• 実績画像を横方向へ流す
• お客様のロゴを連続して表示する
• 商品画像を自動でスクロールさせる
• ホームページに動きのあるコンテンツを追加する

といった場面で利用できます。

このようなアニメーションはJavaScriptや外部ライブラリを使用して実装することもできますが、一定方向へ画像を流し続けるだけであれば、CSSのanimationを使って実装できます。

この記事では、HTMLとCSSだけを使って、複数の画像を右から左へ無限に流す方法を解説します。

また、既存のホームページへ実装した場合でも他のCSSと競合しにくいように、対象を専用のクラスに限定した書き方で実装します。

完成形

まずは完成形をご覧ください。

3枚の画像が右から左へ一定の速度で流れ続けています。

画像が画面の外へ移動した後も、同じ画像が続いて表示されるため、画像が途切れることなく無限に流れているように見えます。

今回の実装ではJavaScriptを使用していません。

HTMLとCSSだけで実装できるため、シンプルな画像アニメーションをホームページへ追加したい場合にも利用できます。

HTMLコーディング

まずはHTMLを記述します。

<div class="slide-animation">
  <ul class="slide-contents">
    <li><img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge01.png" alt=""></li>
    <li><img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge02.png" alt=""></li>
    <li><img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge03.png" alt=""></li>
  </ul>

  <ul class="slide-contents">
    <li><img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge01.png" alt=""></li>
    <li><img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge02.png" alt=""></li>
    <li><img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge03.png" alt=""></li>
  </ul>

  <ul class="slide-contents">
    <li><img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge01.png" alt=""></li>
    <li><img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge02.png" alt=""></li>
    <li><img src="https://saiun-wp.jp/wp-content/uploads/2026/03/number-badge03.png" alt=""></li>
  </ul>
</div>

.slide-animationについて

<div class="slide-animation">

は、今回作成する画像アニメーション全体を囲むコンテナです。

このクラスを親要素として設定することで、CSSの適用範囲を今回のアニメーション部分に限定できます。

例えば、

img {
  width: 100%;
}

のように指定すると、ホームページ内にあるすべての画像へ影響してしまう可能性があります。

一方で、

.slide-animation .slide-contents li img {
  width: 100%;
}

とすれば、.slide-animationの中にある対象画像だけにスタイルを適用できます。

既存のホームページへCSSを追加する場合は、他のコンテンツへ影響を与えないように適用範囲を限定することが重要です。

---

.slide-contentsを3つ用意する理由

HTMLを見ると、同じ画像を含んだulが3つあります。

<ul class="slide-contents">
  ...
</ul>

<ul class="slide-contents">
  ...
</ul>

<ul class="slide-contents">
  ...
</ul>

「なぜ同じ画像を3回記述する必要があるのか」と疑問に思うかもしれません。

これは、画像を途切れることなく無限に流しているように見せるためです。

イメージとしては、

画像1 → 画像2 → 画像3 → 画像1 → 画像2 → 画像3 → 画像1 → ・・・

という状態を作っています。

1セットだけでは、画像がすべて画面外へ移動した際に表示するものがなくなってしまいます。

そこで同じ画像セットを複数並べておき、1つ目のセットが画面外へ移動している間に、2つ目、3つ目のセットが続いて表示されるようにしています。

CSSコーディング

続いてCSSを記述します。

今回は、既存のホームページへ追加した場合でも他の要素へ影響しにくいよう、各セレクタの適用範囲を限定しています。

.slide-animation {
  display: flex;
  overflow: hidden;
}

.slide-animation .slide-contents {
  margin: 0;
  padding: 0 10px 0 0;
  display: flex;
  gap: 10px;
  animation: loopAnimation 15s linear infinite;
}

.slide-animation .slide-contents li {
  width: 200px;
  list-style: none;
}

.slide-animation .slide-contents li img {
  width: 100%;
}

@keyframes loopAnimation {
  0% {
    transform: translate(0%);
  }

  100% {
    transform: translate(-100%);
  }
}

それぞれのCSSについて詳しく解説します。

---

.slide-animationの設定

.slide-animation {
  display: flex;
  overflow: hidden;
}

display:flexを指定することで、3つの.slide-contentsを横方向に並べています。

そして、

overflow: hidden;

によって、コンテナの外側へ移動した画像を表示しないようにしています。

画像自体は左方向へ移動し続けていますが、表示領域から外れた部分は見えなくなるため、画像が画面の外へ流れていくように見えます。

---

.slide-contentsの設定

.slide-animation .slide-contents {
  margin: 0;
  padding: 0 10px 0 0;
  display: flex;
  gap: 10px;
  animation: loopAnimation 15s linear infinite;
}

ここが今回のアニメーションの中心となる部分です。

margin: 0

ulにはブラウザやテーマによって初期のマージンが設定されている場合があります。

そのため、今回のアニメーションではmargin: 0として余白をリセットしています。

display: flex

liを横方向へ並べるためにdisplay:flexを指定しています。

これによって、

画像1　画像2　画像3

という横並びになります。

gap: 10px

画像同士の間隔を10pxに設定しています。

これによって、画像が密着せず適度な余白を保ちながら流れていきます。

animation: loopAnimation 15s linear infinite

CSSアニメーションを実行するための指定です。

それぞれ、

• loopAnimation：実行するアニメーション名
• 15s：1回のアニメーションにかける時間
• linear：一定速度で動かす
• infinite：無限に繰り返す

という意味があります。

つまり、15秒かけて画像を移動させ、その動きを無限に繰り返すという指定です。

---

なぜpadding-right: 10pxを指定しているのか？

今回のコードで特に注意したいのが、

padding: 0 10px 0 0;

の部分です。

一見すると、

gap: 10px;

だけで画像同士の間隔を作ればよいように思えます。

しかし、実際に無限ループのアニメーションとして動かしてみると、1ループしたタイミングで10px分のズレが発生する問題がありました。

今回の実装では、画像同士の間隔をgap: 10pxで設定しています。

その一方で、1つの.slide-contentsが終わったところにも10px分の間隔が必要になります。

そこで、

padding-right: 10px;

を追加しています。

これによって、1つの画像セットの最後にも10px分の余白が確保され、次の画像セットとの間隔を揃えることができます。

つまり、

画像同士の間隔 → gap: 10px

1セットの最後の余白 → padding-right: 10px

という役割分担になっています。

この調整によって、1ループした際に発生していた10px分のズレを解消しています。

このように、CSSアニメーションはコードを書くだけでなく、実際に動作させたときの表示まで確認しながら微調整することが重要です。

---

.slide-contents liの設定

.slide-animation .slide-contents li {
  width: 200px;
  list-style: none;
}

ここでは画像1枚分の幅を200pxに設定しています。

また、

list-style: none;

によって、ulのリスト項目に表示されるマーカーを非表示にしています。

画像サイズを変更したい場合は、

width: 200px;

の数値を変更します。

例えば300pxにすれば、

width: 300px;

となり、画像を大きくできます。

---

.slide-contents li imgの設定

.slide-animation .slide-contents li img {
  width: 100%;
}

画像の幅を親要素であるliに合わせています。

liの幅が200pxなので、画像も基本的に200pxの幅で表示されます。

ここでも重要なのは、単純に

img {
  width: 100%;
}

とせず、

.slide-animation .slide-contents li img {
  width: 100%;
}

としている点です。

これによって、ホームページ内の他の画像へ影響することを防ぎやすくなります。

---

@keyframesで画像を左へ移動させる

最後に、実際の移動方法を指定します。

@keyframes loopAnimation {
  0% {
    transform: translate(0%);
  }

  100% {
    transform: translate(-100%);
  }
}

@keyframesでは、アニメーション開始時と終了時の状態を指定しています。

0%

transform: translate(0%);

最初は元の位置からスタートします。

100%

transform: translate(-100%);

アニメーションが100%まで進むと、左方向へ移動します。

つまり、

0%              100%
│                 │
元の位置  →  左方向へ移動

という動きになります。

---

なぜ画像が無限に流れて見えるのか？

今回の仕組みを簡単にまとめると、

[画像1・2・3][画像1・2・3][画像1・2・3]
        ← ← ← ← ← ← ←

という3つの画像セットを横方向へ並べています。

そして、各.slide-contentsに同じアニメーションを設定しています。

animation: loopAnimation 15s linear infinite;

それぞれの画像セットが同じ速度で左へ移動するため、1つ目のセットが画面外へ出ても、その後ろから2つ目のセットが続きます。

さらに3つ目のセットも続くため、閲覧者から見ると画像が永遠に流れているように見えます。

---

アニメーションの速度を変更する方法

画像が流れる速度は、

animation: loopAnimation 15s linear infinite;

の15sを変更することで調整できます。

例えば、

animation: loopAnimation 10s linear infinite;

とすると、現在より速く流れます。

反対に、

animation: loopAnimation 30s linear infinite;

とすれば、ゆっくり流れるようになります。

ただし、速ければ良いというわけではありません。

画像の内容を見てもらうことが目的の場合は、閲覧者が認識できる程度の速度に設定することが重要です。

---

画像のサイズを変更する方法

画像1枚あたりのサイズは、

.slide-animation .slide-contents li {
  width: 200px;
}

のwidthで変更できます。

例えば、

width: 300px;

とすれば画像が大きくなります。

スマートフォンでは画像を小さくしたい場合など、メディアクエリを使って画面幅に応じて変更することもできます。

@media screen and (max-width: 599px) {
  .slide-animation .slide-contents li {
    width: 150px;
  }
}

このように設定すれば、スマートフォンでは画像を150pxに変更できます。

---

WordPressでも実装できる？

今回のコードは、WordPressでも利用できます。

例えば、

• カスタムHTMLブロック
• オリジナルテーマ
• 固定ページ
• 投稿ページ

などに実装できます。

ただし、WordPressテーマではimg、ul、liなどにあらかじめCSSが設定されていることがあります。

そのため、既存のサイトへ実装する場合は、

.slide-animation .slide-contents li img

のように対象を限定して記述することをおすすめします。

---

既存ホームページへ実装するときの注意点

CSSアニメーションを既存のホームページへ追加する場合、単純にコードが動けばよいというわけではありません。

特に注意したいのが、既存のCSSとの競合です。

例えばサイト全体に、

img {
  max-width: 100%;
}

や、

ul {
  padding: 20px;
}

などのCSSが設定されている場合があります。

このような既存CSSと新しく追加したCSSの優先順位によって、意図しない余白やサイズになってしまうことがあります。

今回のコードでは、

.slide-animation img

.slide-animation ul

.slide-animation li

のように、アニメーション部分だけを対象にしています。

既存ホームページへ機能を追加・修正するときは、サイト全体へ影響を与えないよう、できるだけ対象を限定してCSSを記述することが重要です。

---

まとめ

今回は、CSSのanimationと@keyframesを使って、複数の画像を右から左へ無限に流す方法をご紹介しました。

今回の方法ではJavaScriptや外部ライブラリを使用せず、HTMLとCSSだけで実装しています。

ポイントをまとめると、

• display:flexで画像を横並びにする
• overflow:hiddenでコンテナ外を非表示にする
• 同じ画像セットを複数用意する
• animationで一定速度の移動を設定する
• @keyframesで移動方向を指定する
• infiniteでアニメーションを繰り返す
• padding-rightでループ時のズレを調整する
• CSSの適用範囲を限定して既存サイトとの競合を防ぐ

という仕組みになっています。

特に今回のような無限ループアニメーションでは、コードを書いて終わりではなく、実際にブラウザで動作させたときに画像の間隔やループのつなぎ目にズレがないか確認することが重要です。

また、既存のホームページへCSSを追加する場合は、現在使用されているテーマやCSSの記述を確認し、他のコンテンツへ影響を与えないように実装する必要があります。

ホームページのCSS・HTML・JavaScriptの修正や、アニメーションなどの機能追加でお困りの場合は、既存サイトの構造を確認したうえで対応しています。

365日対応・8:00〜23:00対応・最短即日対応で、ホームページのちょっとした修正から原因が分からない表示トラブルまで対応しています。