CSSで複数画像を切り替えるアニメーションを作ってみる

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

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

この記事ではCSSで複数画像を切り替えるアニメーションを紹介します。

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

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

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

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

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

画像の準備

事前に画像の準備をしておきましょう。画像パス（ファイルのURL）の取得方法。

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

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

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を使用して画像を切り替える方法は、@keyframesとanimationプロパティを活用します。

/* 複数画像切り替え---------------------------------------------- */
.slider-container {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
}

.slideimg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	background-size: cover;/* 画像をスライド全体にカバー */
	animation: slideAnime 15s infinite; /* 15秒で1サイクル */
}

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


/* 各スライドのアニメーションタイミングを均等にずらす */
.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;
}

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

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

スライダーの枠を作る

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

.slider-container {
	position: relative;/*配置（起点）*/
	width: 100%;
	height: 500px;
	overflow: hidden;
}

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

各画像の設定

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

.slideimg {
	position: absolute;/*配置*/
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	background-size: cover; /* 画像をスライド全体にカバー */
	background-position: center;
	animation: slideAnime 15s infinite; /* 15秒で1サイクル */
}

• position: absolute; 画像が枠の中で自由に配置されるようにします。
• opacity: 0; 画像が最初は見えない状態にします。
• animation: slideAnimation 15s infinite; 15秒ごとに画像が切り替わるアニメーションを繰り返し実行します。

画像とアニメーションの設定

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

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

• 0%, 30%, 100% { opacity: 0; }
  • 画像が非表示になるタイミングを設定しています。各スライドは、最初と最後に非表示になり、中間の一部の時間も非表示にします。
• 10%, 20% { opacity: 1; }
  • 画像が表示される時間を設定しています。ここでは10%から20%の間で画像が表示されます。

このキーフレーム設定により、各スライドは順番にフェードイン・フェードアウトし表示されるようになります。

画像ごとに切り替わりのタイミングをずらす

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

今回は合計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;
}

• background-image：それぞれの画像パスを設定します。
• animation-delay: 画像が表示されるタイミングをずらして、次々に切り替わるようにします。

画像枚数やタイミングは調整できます

画像の枚数や、表示させたい秒数に合わせて調整してください。画像の枚数による、ちょうどよい切り替えタイミングの目安（％）はこれぐらいなら自然な動きになります。

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

/* アニメーションの進行 */
@keyframes slideAnime {
  /* アニメーション開始から0秒 */
  0% {
    opacity : 0;  /* 非表示 */
  }
/* アニメーション開始から25%(10秒設定の場合は2.5秒) */
  25% {
    opacity : 1;  /* 表示する */
  }
  50% {
    opacity : 1;
  }
  75% {
    opacity : 0;
  }
  /* アニメーション開始から100%(10秒設定の場合は10秒) */
  100% {
    opacity : 0;
  }
}

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;}

まとめ

CSSだけで複数の画像を切り替えるアニメーションを作る方法を紹介しました。CSSの基本的な知識があれば誰でも簡単に導入できるので、ぜひ試してみてください。

CSSアニメーションの基本的な指定方法についてはこちらの記事にまとめました。