CSSで遅延アニメーションを作りたい
WEBサイトを見ていると「画像や要素が遅れて表示されている！」という、かっこいいWEBサイトを見る場面も多いかと思います。
複雑なものはどうなっているのかよく分かりませんが、CSSの基本アニメーションだけでも割と簡単に作れましたので、ご興味がありましたらぜひお試しいただければと思います。
アニメーション（animation:）を使う
使い方はシンプルです。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で遅延アニメーションを作りたい・・・！」と思ったときは、ぜひご参考ください。
次回は、下の方を少しずつ表示させる・・・といったような方法を挑戦してみたいと思います。
ご参考下さい。
