問題4:写真切り替えアニメーション
今回は画像切り替えアニメーションを作りましょう!
あらかじめエディタに書くコード
<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¥
期待する画面
解答ソースコード
.img{
opacity: 0;
animation: bgAnimation 9s infinite;
}
.img2{
animation-delay: 3s;
}
.img3{
animation-delay: 6s;
}
@keyframes bgAnimation {
0% {opacity: 0;}
3% {opacity: 1;}
30% {opacity: 1;}
33% {opacity: 0;}
100% {opacity: 0;}
}
¥CSS¥
解説
opacityを0にしてあげて、アニメーションで徐々に表示していきます。解答では9秒間にしているので三等分して3秒ずつ割り当てています。そのため、@keyframesの33%のところで消え切るようにして、2つ目と3番目にはそれぞれ、animation-delayを与えれば、完成です。
ログインして解答を見る
完了にする!
活動記録をTweetする