flower かわいいが届くお花便のトップのアニメーションについて

Question

表題の件について

CSSアニメーションのanimationプロパティで、animation-delayの値が0.2sになっています。
また、animation-fill-modeがnoneになっています。(これでアニメーション後初期の状態に戻るかと思います)

ですがトップに表示されている画像とテキストにはopacityの値が1です。

これだと0.2s文字が表示されてアニメーションが始まるので不自然な感じになると思いますがなっていません????

###自分の考え
トップの画像とテキストはopacityの値を0にする。
animation-fill-modeをforwardsもしくはbothにする

これで思い通りのアニメーションになると思うのですが、なぜ本LPは思い通りのアニメーションを実現できてるのでしょう？

ご回答の程、よろしくお願いいたします????‍♂️

Comments

[yambejp]

リンクが付いてません

[5hqch1]

https://flowr.is/
ですが、解決しました。
初期状態はやはり表示されてる状態みたいです。

[Lhankor_Mhy]

自己解決の処理をお願いします。
https://teratail.com/help#resolve-myself

Answer 1

自分の勘違いでした。
実際の記述通りの動きで0.2s表示された後にアニメーションに入る様です。

模写中にロゴの部分のみにアニメーションを設定した際に違和感があったのが原因でした。

全体にアニメーションを設定すると違和感はなくなりました????‍♂️