cssのanimationの設定の仕方
Animationの表示タイミングが合わないので教えてください。
今回初めてcssのanimationを使ってみました。
同時に、jQuery.BgSwitcher を使って背景画像５枚を５秒間づつ表示させてループさせています。（合計２５秒間）そして、cssのanimation でテキストA,B,Cの３枚を２５秒間表示させています。
表示タイミングは
【背景画像1を表示 テキストＡを表示 テキストＢを非表示 テキストＣを非表示】
【背景画像2を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】
【背景画像3を表示 テキストＡを非表示 テキストＢを表示 テキストＣを非表示】
【背景画像4を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを非表示】
【背景画像5を表示 テキストＡを非表示 テキストＢを非表示 テキストＣを表示】
背景画像で使用しているjQuery.BgSwitcherの表示時間は1枚５秒です。５枚ですので２５秒でループです。animationが適応されているテキストＡ，Ｂ，Ｃの animation-duration: 25s; にしています。
テキスト画像Ａ，Ｂ，Ｃは表示されるタイミングではopacity:1 にしてそれ以外はopacity:0で非表示にして背景画像1,2,3とテキストA,B,Cとの表示タイミングが合わせたいです。
初めはタイミングよく背景画像とテキスト画像が表示されているのですが徐々に表示タイミングずれてしまい５分ぐらいするとanimationのテキストA,B,Cの表示タイミングが背景画像と大きくずれ、例えばテキストＡが背景画像5で表示されるようになってしまいます。
jQuery.BgSwitcherでの背景画像５枚の１ループの時間は２５秒。animationのテキストA,B,Cのanimation-duration: 25s; なのですが、徐々にずれてしまいます。
animation側の設定に問題があるかもしれませんので教えていただけないでしょうか？
現在のテストサイトは下記です。
http://cm-creation.net/yoshida/text-anime-test/index13.html
どうぞよろしくお願いいたします。Cssとhtml設定は下記です。
■cssの設定
.bg-slider {
width: 99.1vw;
height: 100vh;
background-position:center center;
background-size: cover;
display: flex;
justify-content: center;
position: relative;
}
.textA {
position: absolute;
top: 5%;
left:20%;
animation-name:animation1;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.textB {
position: absolute;
top: 5%;
right:20%;
animation-name:animation2;
animation-duration:25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.textC {
position: absolute;
top: 5%;
animation-name:animation3;
animation-duration: 25s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
opacity: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
@keyframes animation1 {
0% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
5% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
26% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
@keyframes animation2 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
41% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
45% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
66% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
@keyframes animation3 {
0% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
81% {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
85% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
101% {
opacity: 0;
transform: translate3d(0, 0px, 0);
}
102% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
■html
<script>
jQuery(function($) {
$('.bg-slider').bgSwitcher({
images: image/main10.jpg','image/main11.jpg','image/main12.jpg','image/main13.jpg','image/main14.jpg'], // 切り替える背景画像を指定
interval: 5000, // 背景画像を切り替える間隔を指定 5000=5秒
loop: true, //
shuffle: false, //
effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
duration: 500, // エフェクトの時間を指定します。
easing: "swing" // エフェクトのイージングをlinear,swingから指定
});
});
</script>
<div class="container-fluid px-0 bg-slider " >
<div class="textA"><img src="image/item8.png" class="img-fluid" alt=""/></div>
<div class="textB"><img src="image/item9.png" class="img-fluid" alt=""/></div>
<div class="textC"><img src="image/item10.png" class="img-fluid" alt=""/></div>
</div>
お礼
回答ありがとうございます。 なるほど、まだ日が浅く、class属性もまともに使えないのは事実なんですが、という事は、セレクタ名を変えればいくらでも使えるって事ですかね、分けて考えることが可能なんですね。 因みにこの間の質問の時みたいな、ダブって変な表示にはなりたくないですね。