CSSアニメーションで画像の切り替わる速さを均一にしたいです

Question

CSSにて、animationプロパティでの画像切り替えについて、お聞きしたいことがあります。
コードの方はコードペンの方に上げさせていただきましたので、チェック頂けましたら幸いです。
コードペンのリンクになります。
コードペンに上げさせて頂きましたコードの、クラス「slide_animation」に適用しているアニメーションなのですが、１枚目から、２枚目に切り替わる速さと3枚目から一枚目に切り替わる速さは同じくらいに見えるのですが、２枚目から３枚目に切り替わる速さだけ、少し早いような気がします。全て、画像が切り替わる速さを均一にするには、どのように修正すればよろしいでょうか？また、ページにアクセスしてからアニメーションが始まるまでに、少し時間がかかってしまっているように思えるのですが、そういった部分を改善することは可能でしょうか？
もし、教えてくださる方いらっしゃいましたら、ご回答頂けましたら幸いです。
よろしくお願いします。

Answer 1

animation-durationが8sで
1枚目と2枚目の時間差が2.6s(.slide_animation_3のanimation-delayとanimation-durationの差より)
2枚目と3枚目の時間差が2.6s(.slide_animation_2のanimation-delayより)
3枚目と1枚目の時間差が2.8s(.slide_animation_2と.slide_animation_3のanimation-delayの差より)

なので、3枚目→1枚目の長さが他より少し長いですね。

解決策としては、animation-durationを7.8sで.slide_animation_3を'5.2s'にする感じですかね。

追記

.slide_animation{
    animation-name:slide;
    animation-duration:7.8s; /* 2.6s × 3枚 */
    animation-iteration-count:infinite;
    opacity:1;
    position:absolute;
}

@keyframes slide {   
    0%{opacity:1}
    33.33333%{opacity:0}
    66.66666%{opacity:0;}
    100%{opacity:1;}
}
.slide_animation_1{
  z-index: 3;
  animation-delay:0s;
}
.slide_animation_2{
  z-index: 2;
  animation-delay:2.6s;
}
.slide_animation_3{
  z-index:1;
  animation-delay:5.2s;
}

こうすると、見かけ上、1番最初だけ画像が消えるのが早い気がすると思うので、その場合は
.slide_animation_1から.slide_animation_3までanimation-delayを同じ秒数ずつ伸ばしてやればよいです。

例）

.slide_animation_1{
  z-index: 3;
  animation-delay:1.3s;
}
.slide_animation_2{
  z-index: 2;
  animation-delay:3.9s;
}
.slide_animation_3{
  z-index:1;
  animation-delay:6.5s;
}

Comments

[newyee]

ご回答ありがとうございます。
「.slide_animation_3」の「animation-delay」に関しましては、計算ミスをしており、「5.2s」指定するところを、「5.4s」と指定していました。
ということは、これで、全ての時間差はそろったことになりますでしょうか...?

[macaron_xxx]

animation-durationが8sのままだと、1枚目と2枚目が2.8sになりますので、全体の時間のanimation-durationを7.8sにする必要があります。

[newyee]

ご返信ありがとうございます。
1枚目と２枚目の差が、2.8sだということなのですが、「.slide_animation_2」の「animation-delay」に2.6sを指定している為、時間差は2.6sではないかと思うのですが、何故2.8sになるのでしょうか？

[macaron_xxx]

今、画面の表示上、
1枚目：shop_img3　.slide_animation_3
2枚目：shop_img1　.slide_animation_1
3枚目：shop_img2　.slide_animation_2
となっていることに留意してください。

[newyee]

ご返信ありがとうございます。
初期表示状態が、「shop_img3」ということなのですが、画面を更新した際に表示される画像はまず、「shop_img1」が表示されている状況です...

[macaron_xxx]

CodepenではBeesというサロン名が入っている画像が表示されていますが？

[newyee]

slide_wrapper内の最初の要素には、クラス「slide_animation_1」があり、その下に、「slide_animation_２」その下に「slide_animation_3」が配置されているため、初期状態の画像は、「slide_animation_1」ではないかと思うのですが、そうではないということでしょうか？

[macaron_xxx]

実態と見比べていますか？
あなたの想像よりも実際の状況を把握してください。

absoluteで重なっており、z-indexが同じ（=指定されていない）場合は、あとに書いたブロックが上に重なります。
なので、今回は3→2→1の順番で重なっています。

[macaron_xxx]

https://codepen.io/iamaimi/pen/BGWKvX

上記コードでは少しずつずらしていますが、あなたのコードはこれがすべて重なっているので、初期に表示されているのは一番最後のブロックである３です。

[macaron_xxx]

>ページにアクセスしてからアニメーションが始まるまでに、少し時間がかかってしまっているように思えるのですが、そういった部分を改善することは可能でしょうか？

この部分見落としてました。
この問題を解決するためにはやはりz-indexを制御する必要があるので、回答に追記します。

[newyee]

ご返信ありがとうございます。
確認してみましたら、お答えいただいた通りでした...
クラス「slide_animation_1」の子要素の画像は、「slide_animation_3」の画像だと勘違いしてしまっていたために、実際には、実現したいことができてしまっていたというのもあり、気づきませんでした...
もし、画像が違っていたら、混乱してしまっていたでしょうし、大変勉強になりました...

[newyee]

追記ありがとうございます。
重ね重ね申し訳ないのですが、ご回答下さったこの部分「1番最初だけ画像が消えるのが早い気がする」なのですが、自分の説明不足で申し訳ないのですが、ページにアクセスしてからむしろ、アニメーションが始まる時間を早めたいと考えております。実は、現在作成していますWEBサイトは勉強の為、既存のサイト真似る形で参考にさせて頂いているのですが、そこでは、ページにアクセスしてから、感覚としては一秒もたたない内にアニメーションが始まり、画像の切り替えがスタートし、２枚目の画像に移行していきます。しかし、自分の作成したコードでは、ページを更新してから、数秒立たないとアニメーションが始まらず、２枚目の画像に移行し始めるのが遅いといった状態です。
細かい点かもしれないのですが、ページを更新してからアニメーションをスタートさせる時間を早めたいといった感覚でおります。

[macaron_xxx]

追記の上の方のコードは即アニメーションが始まるようにしてありますよ。

[macaron_xxx]

そもそも元のコードは、slide_animation_3が一番上になっていた関係で、animation-delayの5.4s後からアニメーションが始まっていました。
私が提示したコードでは、slide_animation_1が一番上になっているので、delayなしですぐにアニメーションが始まります。

[newyee]

画像がそのままでも、並びは問題なかった為、z-indexを設定していなかったのですが、設定したら、すぐに表示されるようになりました...
何度もご回答いただきありがとうございました。