WebページをCSSだけでフワッと滑らかにフェードイン表示させる

アクセスするとフワッとフェードイン表示されるWebページ。何気ないページ移動にアクセントを加えることで、表示の切り替わりが認識しやすくなります。
当ブログもそのスタイルで表示させていますが、これは CSS だけで簡単に実装することができます。

CSS でフェードインさせる

body {
    animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

上記ではページ全体に反映するようにセレクタを「 body 」としていますが、画像だけに反映させるなど使い方はいろいろです。
また、「 1s 」は秒数指定で、長くするとくどくなるので注意です。ちなみに当ブログは短めの「 0.4s 」で指定しています。

-webkit- は要らない

古い情報では「 -webkit- 」のベンダープレフィックスを加えた CSS で説明されていますが、今では「 animation 」プロパティや「 @keyframes 」にベンダープレフィックスは必要ありません。