CSSのスライドギャラリーのアニメーションが上手く繰り返さない
Q&A
Closed
解決したいこと
cssだけで、画像8枚を繰り返し表示するスライドギャラリーを作り、一見うまくいったかに見えました。
が、1～8枚目の再生を繰り返したいのですが、8枚目まで再生すると、7～8枚目が繰り返され、最初の画像に戻りません。何が間違っているのでしょうか。。。
該当するソースコード
<div class="main-slide">
<img src="images/slide1.jpg" alt="画像1">
<img src="images/slide2.jpg" alt="画像2">
<img src="images/slide3.jpg" alt="画像3">
<img src="images/slide4.jpg" alt="画像4">
<img src="images/slide5.jpg" alt="画像5">
<img src="images/slide6.jpg" alt="画像6">
<img src="images/slide7.jpg" alt="画像7">
<img src="images/slide8.jpg" alt="画像8">
</div>
.main-slide img:nth-of-type(1) { animation-delay: 0s; }
.main-slide img:nth-of-type(2) { animation-delay: 3s; }
.main-slide img:nth-of-type(3) { animation-delay: 6s; }
.main-slide img:nth-of-type(4) { animation-delay: 9s; }
.main-slide img:nth-of-type(5) { animation-delay: 12s; }
.main-slide img:nth-of-type(6) { animation-delay: 15s; }
.main-slide img:nth-of-type(7) { animation-delay: 18s; }
.main-slide img:nth-of-type(8) { animation-delay: 21s; }
@keyframes fadeIn {
0% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 1; }
75% { opacity: 1; }
99.9%,to{ opacity: 0 ;}
}
@keyframes zoomIn {
0% {
transform: scale(1.15);
}
99.9%,to{
transform: scale(1);
}
}
自分で試したこと
100%だとバグが発生するらしいので、99.9%,toにしてみましたがダメです。
0 likes
