CSSのみでページ読み込み時のフェードインを実装する方法

2019.03.28

ページの読み込み時、パッと表示されるだけだとつまらない、デザインの雰囲気と合わない・・・そんなときに試してほしいのが、今回紹介するCSSだけでページのフェードインを表現する方法です。

javascriptをつかった方法の方が一般的ですし、フェードアウト部分まで実装できるので使い勝手は良いですが、フェードインだけだったら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プロパティの説明

サンプルの下記ソースの場合、左から順に、「animation-name」「animation-duration」「animation-timing-function」「animation-delay」「animation-iteration-count」「animation-direction」というプロパティになっています。

animation: fadeIn 2s ease 0s 1 normal;

プロパティ	内容	指定可能な値	初期値
animation-name	キーフレーム名	文字列	none
animation-duration	所要時間	秒	0s
animation-timing-function	キーフレームの進み具合（イージング）	ease、ease-in、ease-out、linear、step-start、step-end	ease
animation-delay	遅延時間	秒	0s
animation-iteration-count	繰り返し設定	infiniteで繰り返し	1
animation-direction	繰り返しの方向	normal、reverse、alternate、alternate-reverse	normal