【CSS】ふわっと（透明状態から）表示されるサイトの作り方

今回は下のGIF画像の様な、ふわっと表示されるようなサイトの作り方をメモしていきます。

※画像をクリックすると動きます

この演出はサイトを表示された時、あるいは更新をかけたときに発生します。ふわっと現れるので、ちょっぴりやわらかな感じを受けますよね。サイト全体を覆う効果ですが、作り方は非常に簡単です。では早速見ていきましょう。

CSSを使ってサイト全体を透明状態から不透明状態にする

見出しにある通りなのですが、このふわっと現れるような効果は、言葉にすると「透明状態から不透明状態になる」ということなのです。透明度を操作するプロパティは「opacity」ですが、時間の経過で表示させていくのでアニメーションと合わせて使用します。以下のCSSコードを挿入するだけで再現できます。

 

結構シンプルなコードですね。それでは簡単な捕捉です。

@keyframesについて

今回使用した「@kyeframes 〇〇〇」という部分、これが今回のポイントとなる部分です（〇〇〇部分は自由につけれます）。

 

@keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。
@keyframes は、@規則というもので、@から始まり、波括弧内に操作したい内容を記述します。
何となく分かるとは思いますが、0％がアニメーション開始地点で、100％がアニメーション終了地点のスタイルです。ちなみにこの0から100％の間に、50％などの中間を作ることもかのうです。
これがアニメーションの定義となり、実際に動かすためにはこのキーフレームを呼び出さなければなりません。

@keyframesの呼び出し方法

今回は”body”要素全てにこの効果が適用されるように設定しました。”body”要素ではなく、特定の”div”タグ内など、範囲の狭いところにだけ設定することも可能です。
「animation-duration」は「どのくらいの時間をかけて、アニメーションを完了させるか」という設定になります。
「animation-name」は呼び出す@keyframes名を入力すれば、呼び出すことができます。

まとめ

今回は透明状態から不透明状態にするアニメーションでしたが、他にもよく使うアニメーションをあらかじめ設定しておき、繰り返し使えるようにしておけば便利ですね(*’ω’*)

それでは今回はここまでです。お疲れ様でした(・ω・)ノシ