会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【CSS】アニメーションで画像や文字を遅延表示(遅れて表示)させる方法|CSS animation

CSS(シー・エス・エス)
この記事は約2分で読めます。

CSSで遅延アニメーションを作りたい

WEBサイトを見ていると「画像や要素が遅れて表示されている!」という、かっこいいWEBサイトを見る場面も多いかと思います。

複雑なものはどうなっているのかよく分かりませんが、CSSの基本アニメーションだけでも割と簡単に作れましたので、ご興味がありましたらぜひお試しいただければと思います。

■サンプルページはこちら

サンプルページ

アニメーション(animation:)を使う

animation-fill-mode - CSS: カスケーディングスタイルシート | MDN
animation-fill-mode は CSS のプロパティで、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。

使い方はシンプルです。animation:でアニメーションを指定、@keyframesでアニメーションの名前を指定して、透明→不透明に変化をさせることで、ふわっと表示されるような表現を作ることができます。

.columns {
animation: fadeInBox 4s linear;
}

@keyframes fadeInBox{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

上記の場合、4秒間の一定速度で不透明度0%→100%に変化していきます。

@keyframes - CSS: カスケーディングスタイルシート | MDN
@keyframes は CSS のアットルールで、アニメーションの流れに沿ったキーフレーム(または中間地点)のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップをトランジションよりも詳細に制御できます。

まとめ

今回は、CSSのアニメーションだけで表現する方法についてのご紹介でした。Javascriptを使うともっと複雑な表現も可能だと思いますが、CSSだけでも十分に目的の表現は可能では?とも思います。

【アニメーション設定後】

「CSSで遅延アニメーションを作りたい・・・!」と思ったときは、ぜひご参考ください😃

■サンプルページはこちら

サンプルページ

次回は、下の方を少しずつ表示させる・・・といったような方法を挑戦してみたいと思います。

ご参考下さい😃

タイトルとURLをコピーしました