CSSだけでページ読み込み時にフェードインで表示する方法

今回はページを表示するときに全体をフェードインしながら表示する方法をCSSだけで実装する方法を紹介します。

jQueryももちろん不要です。

 

CSSだけでフェードイン

コードはこんな感じになります。

body { 
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal; 
} 
@keyframes fadeIn { 
  0% {opacity: 0} 
  100% {opacity: 1} 
} 
@-webkit-keyframes fadeIn {
  0% {opacity: 0} 
  100% {opacity: 1} 
}

 

そこまで長くないですね。

詳しく解説します。

 

解説

bodyセレクタでanimationプロパティを使用しています。

わかりやすいように番号を振ってみます。

animation: ①fadeIn ②2s ③ease ④0s ⑤1 ⑥normal;

それぞれの値と指定する内容は以下の通りです。

  • ① animation-name:実行するアニメーション名を指定
  • ② animation-duration:1回のアニメーションにかかる時間を指定
  • ③ animation-timing-function:イージングを指定。linear、ease、ease-in-outなど様々なイージングがある
  • ④ animation-delay:アニメーションの開始時間を何秒遅らせるかを指定
  • ⑤ animation-iteration-count:アニメーションを繰り返す回数を指定
  • ⑥ animation-direction:繰り返し時の往復処理の方法を指定

 

今回で言うと①のアニメーション名は@keyframesで指定されている「fadeIn」というアニメーションを指定しています。

animation-durationは時間数によって雰囲気が変わってくるので、自分のベストだと思う秒数を指定しましょう。

イージングの種類も結構重要なので色々試してみてください。探すと色々イージングの種類があります。

 

@keyframes

@keyframesはアニメーションを作成するCSSプロパティで、@keyframesの後につけた任意の名前がアニメーションの名前になります。

前述した①のanimation-nameは@keyframesで決めた名前と同じでなければなりません。

@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/ 
  0% {opacity: 0} /*アニメーション開始時は完全に透過*/ 
  100% {opacity: 1} /*アニメーション終了時は透過しない*/ 
} 
/*旧 Safari 用のベンダー処理*/ 
@-webkit-keyframes fadeIn {
  0% {opacity: 0} 
  100% {opacity: 1} 
}

 

アニメーションの開始時点が0%、終了時点が100%となっており、自分で%を指定することでどのタイミングでどんなアニメーションがしたいかを決めることができます。

今回なら0%(開始時点)から100%(終了時点)までにopacityが0から1に変化するようなアニメーションとなっています。

また、Safariの古いバージョンだとベンダーインプレックスがないと動かない可能性があるので、念の為-webkit-をつけておきましょう。

 

ちなみにフェードアウトはCSSだけだと多分無理です。

ページ移動が発生した時だけCSSを呼び出すとなると、何処かのタイミングでjQueryがおそらく必要になるので…

とにかくページをフェードインで表示することはCSSだけでも十分可能です。

@keyframesも慣れるとできることが増えていくので、ぜひ試してみてください!