【コピペで簡単！】複数画像を自動差し替えするCSSアニメーション【フィードイン・フィードアウト】

JavaScriptは使わずに、CSSだけで複数の画像を一定間隔で自動的に切り替えていくCSSアニメーションの実装例です。

コピペで簡単に画像のフィードイン・フィードアウトが可能です。

Contents

完成コード
コードの説明
- HTMLの説明
- CSSの説明

完成コード

See the Pen 複数画像を自動差し替えするCSSアニメーション by ゆゆう (@yuyuu-dev) on CodePen.

コードの説明

HTMLの説明

<div>
  <h1>複数画像を自動差し替えするCSSアニメーション</h1>
  <div class="container">
    <img class="image" src="https://drive.google.com/uc?export=view&id=1aFZSWIiplKxfVsOswYVL3oOwyFaOW3wf" />
    <img class="image" src="https://drive.google.com/uc?export=view&id=1BPZ2rCo1UQBk-ez2zskeldd54AT5xsI9" />
    <img class="image" src="https://drive.google.com/uc?export=view&id=15_gL0a5x0h5S_DA4eLyzZOyxV55H4zm_" />
  </div>
</div>

親要素を用意して、その中に画像を配置します。

今回は３枚の画像を配置しました。

CSSの説明

.container {
  position: relative;
  width: 300px;
  height: 200px;
}
.image {
  position: absolute;
	width: 100%;
	opacity: 0;
	animation: change-img-anim 30s infinite;
}

親要素として用意した「.container」に画像のサイズを指定します。

画像を重ねるために「position: absolute」を指定しています。

画像が以降の要素と重ならないように親要素「.container」には高さを指定します。

画像「.image」に、animationプロパティを指定します。

今回は、フェードインとフェードアウトをセットにした@keyframesアニメーション「change-img-anim」を指定します。

ただし、最初の画像はフィードインせずに初期表示させたいため、一枚目の「.image」には「change-img-anim-first」を指定します。

.image:nth-of-type(1) {
  animation: change-img-anim-first 30s infinite;
	animation-delay: 0s;
}
.image:nth-of-type(2) {
	animation-delay: 10s;
}
.image:nth-of-type(3) {
	animation-delay: 20s;
}

画像が全て置き換わるまでのアニメーション時間をanimationプロパティに設定します。

また、表示を繰り返すために「infinite」を設定しています。

animation: change-img-anim 30s infinite;

それぞれの画像のアニメーションが開始されるまでの遅延時間を指定します。

animation-delay: 0s;

animation-delay: 10s;

animation-delay: 20s;

今回は3枚の画像なので、1枚目0秒、2枚目10秒、3枚目20秒と設定しています。

5枚の画像であれば、合計時間50秒にし、animation: change-img-anim 50s infinite;

1枚目0秒、2枚目10秒、3枚目20秒、4枚目30秒、5枚目40秒と設定します。

animation-delay: 0s;

animation-delay: 10s;

animation-delay: 20s;

animation-delay: 30s;

animation-delay: 40s;

@keyframes change-img-anim-first {
	0%{ opacity: １;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}

@keyframesで画像の切り替えアニメーションを調節しています。

change-img-anim-first は一枚目のアニメーションを設定しています。

一枚目は最初から表示したいため 0%〜45%の間をopacity:1を設定しています。

change-img-anim は2枚目以降の画像に設定しています。

最初は非表示にするため、30%〜45%の間をopacity:1で設定しています。

以上で、簡単に画像のフィードイン・フィードアウトできます。