Top

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

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-duration1回のアニメーションにかかる時間を指定。
③ 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 だけで簡単に実装できますので、使ってみるのも面白いかもしれません。

  1. suzuki

    初歩的な質問なのですがご教授いただければ幸いです。

    フェードイン・フェードアウトをする際の時間指定で12時間かけてゆっくりとフェードインフェードアウトをさせることは可能なのでしょうか?

    2017-08-04 12:57Reply
    • 時間を12時間を秒にすれば理論上可能です。

      2017-08-05 18:44Reply
  2. 匿名

    初めまして。

    いきなりのご連絡失礼します。

    本日アップ予定の記事内にて、フェードインの説明箇所にこちらのリンクを参考リンクとして貼らせていただいたご報告とお礼を言いたくてご連絡致しました。

    非常にわかりやすく、大変参考になりました。

    ありがとうございました。

    2017-08-17 14:23Reply
  3. ちじたぜ

    表示が遅くなるので個人的にはあまり好きではありませんがおしゃれなので僕のHPに採用させていただきます。

    2017-09-09 10:59Reply