CSSで実装！複数画像を切り替えるアニメーションの作り方

トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあると、ぱっと目を引くことができて華やかです。

通常、これらのアニメーションはJavaScriptを使って実装されますが、フェードイン・アウトといったシンプルな切り替えならCSSだけで作ることもできます。ページの読み込み速度が向上し、コードがシンプルに保たれるというメリットがあります。

実装例：当サイトトップページ
- メインビジュアルとして使用しています。

この記事ではCSSを使った複数画像切り替えるアニメーションの実装方法と、トップページのメインビジュアルとして使用するための工夫を解説します。

今回使うのはCSSアニメーション。

Contents

動き｜CSSだけで複数画像を切り替えるアニメーション
スライダー画像の準備
1. 画像パス（ファイルのURL）の取得方法
2. 画像のサイズ・形式・最適化
実装方法｜CSSだけで複数画像を切り替えるアニメーション
1. HTML
2. CSS
解説｜CSSだけで複数画像を切り替えるアニメーション
トップページのメインビジュアルとして使う方法
1. フルワイド設定
まとめ

動き｜CSSだけで複数画像を切り替えるアニメーション

以下の例では、５枚の画像を3秒ごとに、合わせて15秒かけて切り替えるアニメーションを繰り返しています。今回はこのアニメーションを作っていきます。

See the Pen 複数画像スライド by はっちゃん (@hacchan) on CodePen.

目次に戻る

スライダー画像の準備

事前に画像の準備をしておきましょう。

画像パス（ファイルのURL）の取得方法

「メディア」→「新しいメディアファイルを追加」で画像をアップロード
「URLをクリップボードにコピー」をクリックしてファイルのURLを取得します

写真の素材を探す際は素材数の多い写真ACが便利です。

高解像度の写真素材なら【写真AC】無料会員登録はこちら

画像のサイズ・形式・最適化

推奨サイズ

横幅：1200px以上
横幅は1200px以上を目安とします。メインビジュアルとして大画面で表示するには、より美しく表示される1920pxを推奨します。

推奨画像形式

JPEGまたはWebP
これらの形式は汎用性が高く、軽量で高品質な画像表示が可能です。

画像最適化のポイント

無料ツールやプラグイン（例：EWWW Image OptimizerやShortPixel）を活用して画像を圧縮し、ページの読み込み速度を最適化しましょう。

目次に戻る

実装方法｜CSSだけで複数画像を切り替えるアニメーション

実装するにはHTMLとCSSを使います。編集とバックアップについてはこちらのページをご確認ください。

Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法

サイトのデザインや機能を向上させるためにHTML・CSSのカスタマイズは有用ですが、初めて取り組む場合は戸惑うこともありますよね。この記事では、ワードプレスのバックアップ方法やHTML・CSSの編集手順について詳しく解説します。作業に入る前...

HTML

<div class="slider-container">
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
    <div class="slideimg"></div>
</div>

表示したい画像の枚数分、<div class="slideimg"></div>を追加します
画像パスはCSSで設定します

今回は５枚表示するので５個追加しています。

CSS

以下は複数の画像を切り替えるスライダーの基本CSSコードです。

/* 複数画像切り替え---------------------------------------------- */
.slider-container {
	position: relative; /* コンテナ内でスライド位置を相対的に設定 */
	width: 100%; /* コンテナ幅を100%に */
	height: 500px; /* コンテナの高さを固定 */
	overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
}

/*画像の配置*/
.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
 	inset: 0; /*親要素内にフルサイズで配置*/
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	animation: slideAnime 15s infinite; /* 1サイクル15秒を無限ループ */
}

/* スライド個別設定 */
.slideimg:nth-of-type(1) { background-image: url('画像パス①'); animation-delay: 0s; }
.slideimg:nth-of-type(2) { background-image: url('画像パス②'); animation-delay: 3s; }
.slideimg:nth-of-type(3) { background-image: url('画像パス③'); animation-delay: 6s; }
.slideimg:nth-of-type(4) { background-image: url('画像パス④'); animation-delay: 9s; }
.slideimg:nth-of-type(5) { background-image: url('画像パス⑤'); animation-delay: 12s; }

/*タイミング設定*/
@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; } /* 非表示のタイミング */
	10%, 20% { opacity: 1; } /* 表示されるタイミング */
}

目次に戻る

解説｜CSSだけで複数画像を切り替えるアニメーション

CSSでどのような設定をしているか役割ごとに説明しますね。

スライダーの枠を作る

まず、画像を表示する枠（コンテナ）を作ります。この枠は画像が切り替わるエリアです。

.slider-container {
	position: relative; /* コンテナ内でスライド位置を相対的に設定 */
	width: 100%; /* コンテナ幅を100%に */
	height: 500px; /* コンテナの高さを固定 */
	overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
}

position: relative; コンテナ内で画像を配置できるようにします。
- →.slideimgにposition: absolute;を指定して配置
width と height　枠のサイズを指定します。幅は100%、高さは500pxに設定しています。
overflow: hidden; 枠からはみ出した部分は見えなくします。

画像の配置

次に、各画像をスライドとして配置します。

.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
	inset: 0; /*親要素内にフルサイズで配置*/
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	animation: slideAnime 15s infinite; /* 1サイクル15秒を無限ループ */
}

position: absolute; 画像を枠の中で自由に配置できるようにします。
inset 0; top, left, bottom, right を省略して一括設定します。上下左右すべて0の位置に設定し、要素のボックスが完全に親要素にフィットするようにします。
opacity: 0; 画像が最初は見えない状態にします。
animation: slideAnimation 15s infinite; 15秒ごとに画像が切り替わるアニメーションを繰り返し実行します。

画像と開始タイミングの設定

画像を設定し、時間差で表示されるようにアニメーションの開始タイミングを調整します。

今回は合計15秒で5枚なので3秒ごとアニメーションを遅らせて開始します。

/* スライド個別設定 */
.slideimg:nth-of-type(1) { background-image: url('画像パス①'); animation-delay: 0s; }
.slideimg:nth-of-type(2) { background-image: url('画像パス②'); animation-delay: 3s; }
.slideimg:nth-of-type(3) { background-image: url('画像パス③'); animation-delay: 6s; }
.slideimg:nth-of-type(4) { background-image: url('画像パス④'); animation-delay: 9s; }
.slideimg:nth-of-type(5) { background-image: url('画像パス⑤'); animation-delay: 12s; }

解説

.slideimg:nth-of-type(n)
- n 番目に位置する子要素に対して特定のスタイルを適用します。
  ここでは、.slideimg クラスを持つ要素の「1番目」「2番目」…「5番目」をそれぞれターゲットとしています。
- .slideimg:nth-of-type(1) → 最初の画像
  - .slideimg:nth-of-type(2) → 2番目の画像
background-image
- 各画像に表示する背景画像のURLを指定します。
- url('画像パス①')は最初のスライドに設定される背景画像。url('画像パス②')は2番目のスライド用背景画像。各スライドで異なる背景画像を設定することでスライドショーの内容が変化する仕組みです。
animation-delay
- スライド切り替えの開始タイミングを設定します。
  スライドはすべて同じアニメーション（slideAnime）を使いますが、この animation-delay プロパティによりスライドごとに異なる時間でアニメーションを開始します。
- - .slideimg:nth-of-type(1) はアニメーションを遅延なく0秒から開始
  - .slideimg:nth-of-type(2) は3秒遅らせて開始
  - .slideimg:nth-of-type(3) は 6秒遅らせて開始。

これにより、各スライドが順番に切り替わるアニメーション効果を実現しています。

アニメーションの設定

ここでは画像が切り替わる動きを作ります。画像がフェードイン・フェードアウト（徐々に表示・非表示）しながら順番に表示されます。

下記コードは、画像がどのタイミングで表示されるかを@keyframesで設定したものです。

@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; } /* 非表示のタイミングを設定 */
	10%, 20% { opacity: 1; } /* 表示されるタイミングを設定 */
}

解説

このアニメーションは slideAnime という名前が付けられており、任意の要素に animation: slideAnime; のように指定することで適用されます。ここでは以下のようなタイミング設定をしています。

@keyframes はCSSアニメーションの動きを指定するルールです。
- アニメーションに対してどのタイミングでどのような変化を起こすかを記述します。
- 全体のアニメーションは 0%（開始時点）から100%（終了時点）までの時間で実行されます。

アニメーションの動き
- アニメーション全体の透明度変化を視覚的に整理するとこのようになります。
- - 0～10%：徐々にフェードインを開始する準備段階。完全に透明（opacity: 0）
  - 10～20%：フェードインしてスライドが完全に表示される（opacity: 1）
  - 20～30%：表示された状態を保つ（opacity: 1）
  - 30～100%：フェードアウト後、徐々に透明になり次のスライドを準備（opacity: 0）

透明度が変化することで、「自然なフェードイン・フェードアウト」の効果をもたらします。

ポイントと調整方法

画像の枚数や、表示させたい秒数に合わせて調整してください。

タイミング調整
各スライドの表示時間を長くしたい場合は、10% と 20% を広げる（例: 10%～40%）。
スムーズな動作
デフォルトのイージング（緩急効果）を変更したい場合は、animation-timing-function を活用する。

切り替えタイミングの目安（％）

画像の枚数による、ちょうどよい切り替えタイミングの目安（％）はこれぐらいだと自然な動きになります。

	画像２枚	画像３枚	画像４枚	画像５枚
opacity: 0;	0%, 75%, 100%	0%, 63%, 100%	0%, 40%, 100%	0%, 30%, 100%
opacity: 1;	25%, 50%	20%, 33%	15%, 25%	10%, 20%

ここはふわっとなるように、お好みでいろいろ試すとおもしろいかも。

アニメーションタイミング例

タイミングに決まりはありませんが、あまりに適当な数字を入れると変な動きになってしまいます。いくつかのパターンを掲載するので、よさそうと思ったらそのまま使ってください。

3枚の画像を3秒ごとに切り替える（１周9秒）
4枚の画像を3秒ごとに切り替える（１周12秒）
5枚の画像を2秒ごとに切り替える（１周10秒）
5枚の画像を3秒ごとに切り替える（１周15秒）

アニメーション部分のみ抜粋します

3枚の画像を3秒ごとに切り替える（１周9秒）

スライド１

スライド２

スライド３

.slideimg {
	animation: slideAnime 9s infinite; /* 9秒で1サイクル */
}

@keyframes slideAnime {
	0%, 63%, 100% { opacity: 0; }/* スライドの非表示タイミング */
	20%, 33% { opacity: 1; }/* スライドの表示タイミング */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1) {animation-delay: 0s;}
.slideimg:nth-of-type(2) {animation-delay: 3s;}
.slideimg:nth-of-type(3) {animation-delay: 6s;}

4枚の画像を3秒ごとに切り替える（１周12秒）

スライド１

スライド２

スライド３

スライド４

.slideimg {
	animation: slideAnime 12s infinite; /* 12秒で1サイクル */
}

@keyframes slideAnime {
	0%, 40%, 100% { opacity: 0; }/* スライドの非表示タイミング */
	15%, 25% { opacity: 1; }/* スライドの表示タイミング */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1) {animation-delay: 0s;}
.slideimg:nth-of-type(2) {animation-delay: 3s;}
.slideimg:nth-of-type(3) {animation-delay: 6s;}
.slideimg:nth-of-type(4) {animation-delay: 9s;}

5枚の画像を2秒ごとに切り替える（１周10秒）

スライド１

スライド２

スライド３

スライド４

スライド５

.slideimg {
	animation: slideAnime 10s infinite; /* 10秒で1サイクル */
}

@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; }/* スライドの非表示タイミング */
	10%, 20% { opacity: 1; }/* スライドの表示タイミング */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1) {animation-delay: 0s;}
.slideimg:nth-of-type(2) {animation-delay: 2s;}
.slideimg:nth-of-type(3) {animation-delay: 4s;}
.slideimg:nth-of-type(4) {animation-delay: 6s;}
.slideimg:nth-of-type(5) {animation-delay: 8s;}

5枚の画像を3秒ごとに切り替える（１周15秒）

スライド１

スライド２

スライド３

スライド４

スライド５

.slideimg {
	animation: slideAnime 15s infinite; /* 15秒で1サイクル */
}

@keyframes slideAnime {
	0%, 30%, 100% { opacity: 0; }/* スライドの非表示タイミング */
	10%, 20% { opacity: 1; }/* スライドの表示タイミング */
}

/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1) {animation-delay: 0s;}
.slideimg:nth-of-type(2) {animation-delay: 3s;}
.slideimg:nth-of-type(3) {animation-delay: 6s;}
.slideimg:nth-of-type(4) {animation-delay: 9s;}
.slideimg:nth-of-type(5) {animation-delay: 12s;}

目次に戻る