CSSで遅延アニメーションを作りたい
WEBサイトを見ていると「画像や要素が遅れて表示されている！」という、かっこいいWEBサイトを見る場面も多いかと思います。
複雑なものはどうなっているのかよく分かりませんが、CSSの基本アニメーションだけでも割と簡単に作れましたので、ご興味がありましたらぜひお試しいただければと思います。
■サンプルページはこちら
https://css.eguweb.tech/p020/
css.eguweb.tech
アニメーション（animation:）を使う
animation-fill-mode - CSS: カスケーディングスタイルシート | MDN
animation-fill-mode は CSS のプロパティで、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。
developer.mozilla.org
使い方はシンプルです。animation:でアニメーションを指定、@keyframesでアニメーションの名前を指定して、透明→不透明に変化をさせることで、ふわっと表示されるような表現を作ることができます。
.columns {
animation: fadeInBox 4s linear;
}
@keyframes fadeInBox{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}上記の場合、４秒間の一定速度で不透明度０％→１００％に変化していきます。
@keyframes - CSS: カスケーディングスタイルシート | MDN
@keyframes は CSS のアットルールで、アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステッ...
developer.mozilla.org
まとめ
今回は、CSSのアニメーションだけで表現する方法についてのご紹介でした。Javascriptを使うともっと複雑な表現も可能だと思いますが、CSSだけでも十分に目的の表現は可能では？とも思います。
【アニメーション設定後】
「CSSで遅延アニメーションを作りたい・・・！」と思ったときは、ぜひご参考ください😃
■サンプルページはこちら
https://css.eguweb.tech/p020/
css.eguweb.tech
次回は、下の方を少しずつ表示させる・・・といったような方法を挑戦してみたいと思います。
ご参考下さい😃
