複数の画像を自動的に差し替えるCSSアニメーション
CSSだけで複数の画像を一定間隔で自動的に切り替えていくCSSアニメーションの実装パターンを紹介しています。
画像を自動的に差し替えるCSSアニメーション
See the Pen CSS Replace images automatically animation by yochans (@yochans) on CodePen.
HTMLには切り替える3つのimgタグを設置、CSSの「position: absolute」で重ねますのでそのまま並べておいて問題ありません。
<div class="container">
<img class="image" src="https://raw.githubusercontent.com/Yousuke777/bg/main/cat1.jpg" />
<img class="image" src="https://raw.githubusercontent.com/Yousuke777/bg/main/cat2.jpg" />
<img class="image" src="https://raw.githubusercontent.com/Yousuke777/bg/main/cat3.jpg" />
</div>親要素の「.container」は画像のサイズを指定、画面サイズより指定した値が大きい場合に100％表示にしています。
画像に「position: absolute」を指定していますので以降の要素と重ならないように親要素には高さを指定しておく必要があります。
animationプロパティで、フェードインとフェードアウトをセットにした@keyframesアニメーション「change-img-anim」を指定します。
アニメーション時間は3つの画像が全て置き換わるまでの合計時間を指定します。
また、無限ループさせる為に「infinite」を指定します。
それぞれの画像に対してアニメーション開始までの遅延時間を指定します。
animationプロパティで指定した合計時間を枚数で割った数をanimation-delayプロパティで2枚目の画像に、さらに足した数を3枚目の画像に指定していきます。
サンプルでは3枚の画像ですので1枚目0秒、2枚目10秒、3枚目20秒となります。
もし、5枚の画像であれば、合計時間50秒にして1枚目0秒、2枚目10秒、3枚目20秒、4枚目30秒、5枚目40秒となしていきます。
.container {
position: relative;
width: 500px;
max-width: 100%;
height: 400px;
}
.image {
position: absolute;
width: 100%;
opacity: 0;
animation: change-img-anim 30s infinite;
}
.image:nth-of-type(1) {
animation-delay: 0s;
}
.image:nth-of-type(2) {
animation-delay: 10s;
}
.image:nth-of-type(3) {
animation-delay: 20s;
}
@keyframes change-img-anim {
0%{ opacity: 0;}
10%{ opacity: 1;}
90%{ opacity: 1;}
100%{ opacity: 0;}
}更新：キーフレームの値を画像の枚数に関係なく切り替わるように編集しました。
これより以下のCSSの編集方法は不要となっています。
JavaScriptバージョンは以下のページにて紹介しています。
関連：JavaScript | animate()で画像差し替えアニメーション | ONE NOTES
@keyframesで指定するアニメーションも、枚数に応じて調節する必要があります。
4枚の画像を自動で切り替える場合は、100％の4分の1である25％を中心にした値、例えば20％～40％で画像が表示されるように設定します。
@keyframes change-img-anim {
0%{ opacity: 0;}
20%{ opacity: 1;}
30%{ opacity: 1;}
35%{ opacity: 0;}
100%{ opacity: 0;}
}画像の枚数が5枚の場合は、100%の5分の1になる20%を中心に、例えば15％～25％で表示されるようにします。
範囲を変更して切り替わり具合を調節する事ができます。
@keyframes change-img-anim {
0%{ opacity: 0;}
15%{ opacity: 1;}
25%{ opacity: 1;}
30%{ opacity: 0;}
100%{ opacity: 0;}
}