cssのKeyframesとanimationのコードについて

Question

cssのアニメーションの実装をしているのですが
初めてのことで苦戦しており、教えいただける方いらっしゃいますでしょうか。

やりたいこと：画像が切り替わるアニメーションをつけたいです。

・1枚目の画像が消え切る前に2枚目の画像を表示させたいのですが、現状1枚目が消え切ってから2枚目が出てくる形になっています。
どこで制御できるのかお教えいただきたいです。

・3枚の画像の切り替えだとして、3枚目が終わったら途切れることなく1枚目の表示に行きたいのですが、うまくいかず苦戦しています。
コンテンツによって切り替えたい画像の枚数が異なるためそれぞれの枚数ごとに記述しようと思っており、各記述箇所の意味を教えていただけますと幸いです。

様々なサイトで調べては見たものの、自分の記述に当てはめることが難しく、質問させていただきました。
解決いただける方、何卒よろしくお願いいたします。

<div class="slide_3p_main>
        		<img class="img_test" src="images/img01_2.jpg" >
          		<img class="img_test" src="images/img01_3.jpg">
          		<img class="img_test" src="images/img01_4.jpg">
          	</div>

.slide_3p_main{
position: relative;
    width: 509px;
    height: 693px;
}
.img_test {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: change-img-anim 10s infinite;
}
.img_test:nth-of-type(1) {
  animation: change-img-anim-first 10s infinite;
  animation-delay: 10s;
}
.img_test:nth-of-type(2) {
  animation-delay: 20s;
}
.img_test:nth-of-type(3) {
  animation-delay: 30s;
}
@keyframes change-img-anim {
  0%{ opacity: 1;}
  20%{ opacity: 1;}
  30%{ opacity: 1;}
  35%{ opacity: 0;}
  100%{ opacity: 0;}
}

Answer 1

下記でどうでしょう。

.slide_3p_main{
position: relative;
    width: 509px;
    height: 693px;
}
.img_test {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: change-img-anim 24s infinite;
}
.img_test:nth-of-type(1) {
  animation-delay: 0s;
}
.img_test:nth-of-type(2) {
  animation-delay: 8s;
}
.img_test:nth-of-type(3) {
  animation-delay: 16s;
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  16.7%{ opacity: 1;}
  33.3%{ opacity: 1;}
  50%{ opacity: 0;}
  100%{ opacity: 0;}
}

Codepen サンプル
css animation: Image fade switching

@keyframesの設定については、私の場合は下記のような手順で計算します。

まずは手書きでアニメーションの図を書きます。
例えば、一つの画像の表示時間が12秒で、画像の切り替えの重なりを4秒とすると下記のような図になります。

ここから、一つの画像が表示され消えてから、次に表示されるまでのサイクルは24秒とわかります。そこでanimation-durationは24sとします。

一つの画像のアニメーションは
0s→4s Fadein
4s→8s 表示
8s→12s Fadeout
12s→24s 非表示
となります。
これを%に変換して@keyframesの設定とします。

4÷24≒16.7%
8÷24≒33.3%
12÷24＝50%

Comments

[suzuharu]

hatena19様

ご回答いただきありがとうございます。
図で見ることで理解ができました。大変助かりました。

実際に当てはめてみたところ途切れることなく表示されるようになったのですが
2枚目から3枚目の切り替わりの時だけ他の切り替わりとは違うスピードで切り替わるようでして、原因などお分かりになりますでしょうか。
（2枚目から3枚の切り替わりの時は2枚目が消えかかる前に3枚目が出てきてしまいます）

また「opacity: 1;」になるのは16.7%と33.3%の時ですがここの理屈が理解できておらず
お助けいただくこと可能でしょうか。

お手数おかけしますが何卒よろしくお願いいたします。

[hatena19]

> 2枚目から3枚目の切り替わりの時だけ他の切り替わりとは違うスピードで切り替わるようでして、

切り替わりのスピードはどれも4秒のはずなのでおなじはずです。
切り替え部分はフェイドアウト、フェイドインが重なってますが、画像の色の濃さが違うと違うように見えるかもしれません。薄い色だと早く消えるように感じるだろうし、現れるのは遅く感じると思います。これは人間の感覚の問題ですのでしかたないかと。

> また「opacity: 1;」になるのは16.7%と33.3%の時ですがここの理屈が理解できておらず

0%(0秒)→16.7%(4秒) 間がフェイドイン( opacity: ０ → 1 に変化)
16.7%%(4秒)→33.3%(8秒) 間が表示( opacity: 1 )
33.3%%(8秒)→50%(12秒) 間がフェイドアウト( opacity: 1 → 0 に変化)
50%(12秒)→100%(24秒) 間は非表示( opacity: 0 )
ということです。

[suzuharu]

hatena19様

ご回答いただきありがとうございます。
画像による錯覚のようなものなのですね、、、。

「opacity: 1;」についてもありがとうございます。
理解できました。

この度は丁寧にご説明いただきありがとうございました。
大変助かりました。