問題
4画像切り替えアニメーションを作ろう
CSSで画像切り替えアニメーションは、複数の画像を順番に表示・非表示することで実現される表現です。
どのように実装されているのか疑問に思ったことはありませんか？
この問題ではCSSを使った画像切り替えアニメーションの基本的な仕組みを学習します。
流れを理解することでスライドショーのような表現を実装できるようになります。
CSSアニメーションの問題に挑戦しよう！
問題
「画像切り替えアニメーションを作ろう」
CSSを使って画像が順番に切り替わるアニメーションを実装してみましょう。
複数の画像が自動で切り替わるように設定し、
見本の動きに近づくように調整してください。
画像切り替えアニメーションの仕組みを理解することが目的です。
あらかじめエディタに書くコード
<div class="box">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
</div>
¥HTML¥
.box{
width: 300px;
height: 200px;
border: 10px solid sienna;
position: relative;
}
.img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: inherit;
height: inherit;
background-size: cover;
background-repeat: no-repeat;
}
.img1{
background-image: url(https://ninjacode.work/assets/img/top/logo.png);
}
.img2{
background-image: url(https://ninjacode.work/assets/img/top/logo_red.png);
}
.img3{
background-image: url(https://ninjacode.work/assets/img/top/logo_blue.png);
}
@keyframes bgAnimation {
0% {}
3% {}
30% {}
33% {}
100% {}
}
¥CSS¥
期待する画面
解答と解説（画像切り替えアニメーションを作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
画像切り替えアニメーションは、複数の要素を重ねて配置し、それぞれに時間差でアニメーションを適用することで実現できます。
基本的には position: absolute を使って画像を同じ位置に重ね、opacity（透明度）を制御することで表示・非表示を切り替えます。
今回のような自動切り替えでは、@keyframesを使って「表示される時間」と「非表示になる時間」を割合（%）で定義します。
例えば、ある一定の割合まではopacity:1で表示し、その後opacity:0にすることでフェードアウトさせます。
さらに、複数の画像に対して animation-delay を設定することで、それぞれのアニメーション開始タイミングをずらすことができます。
これにより、順番に画像が切り替わるように見せることができます。
重要なのは「1つのアニメーションをずらして使う」という考え方です。
これにより、JavaScriptを使わなくてもCSSだけでスライドショーのような表現が可能になります。
アニメーション時間やdelayの調整によって見え方が大きく変わるため、試行錯誤しながら理解を深めましょう。
補足
opacity は「不透明度」を表すCSSプロパティで、0で完全に透明、1で完全に表示されます。
今回は position: absolute を使って複数の画像を同じ位置に重ね、animation-delay で表示タイミングをずらすことで画像切り替えアニメーションを実現しています。
全体のアニメーション時間を画像枚数で割り、均等に時間配分するのがポイントです。
この考え方を使えば、スライドショーのような表現もCSSのみで実装できます。
・hoverで画像を切り替える方法も学びたい方：hoverで画像を変えよう
・スライダーをCSSだけで作りたい方：CSSで自動切替スライダー
・ふわっと出現するアニメーションも試したい方：ふわっと出現するアニメーションを作ろう
ポイント
CSSで画像切り替えアニメーションを作ろう
画像切り替えアニメーションは、CSSで複数の画像を順番に表示・非表示することで実現するアニメーションです。
基本的にはposition: absoluteで画像を重ね、opacityを使って表示状態を切り替えます。
@keyframesでは表示時間と非表示時間を%で制御し、アニメーションの流れを作ります。
さらにanimation-delayを使って各画像の開始タイミングをずらすことで、順番に画像が切り替わる動きを実現できます。
このように「同じアニメーションをずらして使う」という考え方がポイントで、JavaScriptを使わずにCSSだけでスライドショーのような画像切り替えアニメーションを実装できます。
