一体の時間が経過してからCSSの適用方法は？

よく、スクロールとかして一定時間が経過した後に、影が表示されたり文字色が変わったりするページを拝見しますが、これらはどういった設定で行われていますでしょうか？

今回は、一定時間経過後の仕様で質問をさせて頂けたらと思います。
具体的には、対象の要素、DIVとかでもなんでも良いのですが、対象の要素が幼児されてから、3秒後に影を付けたいと考えた場合にはそういった定義が必要なのでしょうか？

色々と、trandisionなど試してみたのですが結果変わらず…。
スクロール部分については、ライブラリのwow？を使っていますので、無視していただいて大丈夫です。

ただ、対象が表示された際に、こちらで決めたタイミングで影を付けたりするのはどうしたらよいのかと思いましてご相談させて頂きました。
宜しくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/05/30 22:39

こんばんは

＞ライブラリを使っていますので、無視していただいて大丈夫です。
トリガーを取得できていて、開始までを遅らせる方法だけで良いものと解釈しました。

CSSアニメーションを利用しているなら、delayを利用することで可能です。
https://developer.mozilla.org/ja/docs/Web/CSS/an …

スクリプトを利用してアニメーションをなどしている場合は、スクリプトで開始を遅られば済みます。
例えば、単純にsetTimeoutを利用するなど。
https://developer.mozilla.org/ja/docs/Web/API/Wi …

この回答へのお礼

有難うございます。
まだ試しながらなのですが、遅延での動きを確認することができましたのでこの後色々と試して理解を深めたいと思います。
animation系はかなり色々とあるみたいなので、頑張ってみます、いつも本当に有難うございます！㎜

お礼日時：2021/05/31 21:08

No.2 回答者： Ogre7077 回答日時： 2021/05/31 18:47

IE11 を考えなくてよいならば、スクロール検知 API が利用できます

https://developer.mozilla.org/ja/docs/Web/API/In …

検知された後の変化は CSS transition で
https://developer.mozilla.org/ja/docs/Web/CSS/CS …

変化させる前に一定時間を置くなら transition-delay を指定してください
https://developer.mozilla.org/ja/docs/Web/CSS/tr …

== 実装イメージ
対象要素を API に登録
スクロール時に要素が表示されたら、要素に特定の class を付与
CSS で定義した class の効果により transition 効果が発動
ただし transition-delay 指定により、発動まで一定時間待機

この回答へのお礼

有難うございます！
「スクロール検知 API 」というものを初めて知りました、チェックいたします！！

やはり基本は、transition-delayなのですね、大変勉強になります。
アニメーション系は色々と奥が深いのですね、心折れそうですが頑張ります！
これにkeyframeとかも絡んできたら泣きそうになります…。TT
アドバイス有難うございました！㎜

お礼日時：2021/05/31 21:11