CSS だけで Web ページのフェードイン表示を実装する方法

2016-03-13

jQuery を使って実装する方法が過去には一般的でしたが、フェードインだけであれば CSS だけで実装が可能です。

現在このページもその CSS が適用されていますので、ポワーンとフェードインでページが表示がされたと思います。更新する度にフェードインします。

fadeIn only CSS

CSS だけでフェードイン

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	アニメーションの変化率を指定。他に ease、linear、ease-out、ease-in-out やオリジナルの変化率を指定できる。
④ animation-delay	アニメーションの開始をいくら遅らせるかを指定。
⑤ animation-iteration-count	アニメーションを何回繰り返すかを指定。
⑥ animation-direction	繰り返し時、往復処理をするかを指定。

特に ② の animation-duration は何秒かけてフェードインするかの値なので、各自ベストな時間を指定してください。2s は2秒です。

keyframes アニメーション

① の animation-name と名前をそろえる必要があります。

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

/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

0% → 100% で body の不透明度（opacity）を 0 → 1 と滑らかに変更することでフェードインさせています。

Safari は Mac、iOSともに最新版で -webkit- のベンダープレフィックスは必要ないのですが、少し前のバージョンまで必要でしたので一応付けたものも入れておきましょう。

参考：CSS Animation｜Can I use

まとめ

CSS だけを使ってフェードアウトでページ遷移まで出来れば完璧なのですが、現状の CSS だけでは厳しいです。フェードアウト遷移に関しては JavaScript に頼らなくては出来ません。

少し前に流行ったようなページの表示方法ですが、今はあまり見なくなりました。でも CSS だけで簡単に実装できますので、使ってみるのも面白いかもしれません。