【CSS】ふわっと(透明状態から)表示されるサイトの作り方
今回は下のGIF画像の様な、ふわっと表示されるようなサイトの作り方をメモしていきます。
※画像をクリックすると動きます
この演出はサイトを表示された時、あるいは更新をかけたときに発生します。ふわっと現れるので、ちょっぴりやわらかな感じを受けますよね。サイト全体を覆う効果ですが、作り方は非常に簡単です。では早速見ていきましょう。
CSSを使ってサイト全体を透明状態から不透明状態にする
見出しにある通りなのですが、このふわっと現れるような効果は、言葉にすると「透明状態から不透明状態になる」ということなのです。透明度を操作するプロパティは「opacity」ですが、時間の経過で表示させていくのでアニメーションと合わせて使用します。以下のCSSコードを挿入するだけで再現できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@keyframes opacity { 0% { opacity: 0; /*透明状態*/ } 100% { opacity: 1; /*不透明状態*/ } } body { animation-duration: 5s; /*アニメーションを完了するまでの時間設定*/ animation-name: opacity; /*呼び出すキーフレーム名*/ } |
結構シンプルなコードですね。それでは簡単な捕捉です。
@keyframesについて
今回使用した「@kyeframes 〇〇〇」という部分、これが今回のポイントとなる部分です(〇〇〇部分は自由につけれます)。
1 2 3 4 5 6 7 8 |
@keyframes "定義する名前" { 0% { プロパティ: プロパティ値; } 100% { プロパティ:プロパティ値; } } |
@keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。
@keyframes は、@規則というもので、@から始まり、波括弧内に操作したい内容を記述します。
何となく分かるとは思いますが、0%がアニメーション開始地点で、100%がアニメーション終了地点のスタイルです。ちなみにこの0から100%の間に、50%などの中間を作ることもかのうです。
これがアニメーションの定義となり、実際に動かすためにはこのキーフレームを呼び出さなければなりません。
@keyframesの呼び出し方法
1 2 3 4 |
body { animation-duration: アニメーション時間設定; animation-name: @keyframes名; } |
「animation-duration」は「どのくらいの時間をかけて、アニメーションを完了させるか」という設定になります。
「animation-name」は呼び出す@keyframes名を入力すれば、呼び出すことができます。
まとめ
今回は透明状態から不透明状態にするアニメーションでしたが、他にもよく使うアニメーションをあらかじめ設定しておき、繰り返し使えるようにしておけば便利ですね(*’ω’*)
それでは今回はここまでです。お疲れ様でした(・ω・)ノシ