CSS でページの読み込みにフェードイン効果を作成する

1. CSS で animation プロパティと@keyframes ルールを使用してフェードイン効果を作成する
2. CSS で jQuery の animate() メソッドを使用してフェードイン効果を作成する

フェードイン効果により、要素の不透明度が非表示から表示に増加します。選択した要素の不透明度は、指定された時間内に変化します。

このチュートリアルでは、CSS でページをロードするときにこのような効果を実現する方法を紹介します。

CSS で animation プロパティと@keyframes ルールを使用してフェードイン効果を作成する

フェードイン効果については少し知っています。

このメソッドは、animation プロパティと@keyframes ルールを使用して、ページの読み込み中にフェードイン効果を実現します。まず、animation プロパティがどのように機能するかを理解しましょう。

要素のスタイルが時間の経過とともにあるスタイルから別のスタイルに変化するとき、それがアニメーションであることがわかります。animation プロパティは、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction といったプロパティを順に並べた省略形です。

animation プロパティを使用して、animation-name プロパティと animation-duration プロパティのみを指定し、フェードイン効果を作成できます。@keyframes ルールは、選択した要素の CSS スタイルを段階的に変更するために使用されます。

その結果、アニメーション効果が作成されます。@keyframes ルールの animation-name プロパティの値を使用して、徐々に変化するスタイルを適用するアニメーションを選択します。

@keyframes ルール内では、to や from などのセレクターを使用してスタイルを適用します。to および from セレクターは、0%および 100%と同等です。

to セレクターで適用されるスタイルは、from セレクターで適用されるスタイルに徐々に変更されます。変更は、animation-duration プロパティで指定された時間とともに発生します。

フェードインアニメーションを作成するには、@keyframes ルールのセレクターを使用して、ページの不透明度を 0 から 1 に変更できます。@keyframe ルールの構文を以下に示します。

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

たとえば、HTML の p タグ内にいくつかのテキストを記述します。

CSS で、html タグを選択し、animation プロパティを fadein 2s に設定します。ここで、fadein は animation-name であり、2s は animation-duration です。

次に、上記の構文に示すように、@keyframes キーワードを使用してアニメーション名 fadein を選択します。最初のキーフレームセレクターとして 0%を記述し、opacity プロパティを 0 に設定します。

同様に、他の 2つのキーフレームセレクターを 50%および 100%と記述し、不透明度をそれぞれ 0.5 および 1 に設定します。

ここで、ページが読み込まれると、不透明度が 0 に設定されているため、最初はテキストが見えにくくなります。徐々に不透明度が変化し、2 秒以内にテキストが表示されます。

したがって、animation プロパティを使用してフェードイン効果を作成できます。

サンプルコード：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

body {
    animation: fadein 4s; 
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}

CSS で jQuery の animate() メソッドを使用してフェードイン効果を作成する

このメソッドでは、jQuery を使用して CSS でフェードイン効果を作成する別のアプローチについて説明します。

jQuery の animate() メソッドを使用して、目標を達成できます。animate() は、選択した要素のスタイルを徐々に変更して、アニメーション効果を作成します。

CSS スタイルを指定し、アニメーションの速度を提供できます。animate() メソッドの構文を以下に示します。

(selector).animate({css - styles}, duration, easing, callback)

animate() メソッドを使用すると、選択した要素のデフォルトのスタイルが、メソッドで指定されたスタイルで上書きされます。

HTML では、デモンストレーションの目的で最初のメソッドと同じテキストを使用します。まず、CSS の body タグを選択し、opacity プロパティを 0 に設定します。

次に、jQuery で body タグを選択し、animate() メソッドを呼び出します。メソッド内で、スタイルの opacity を 1 に設定し、duration を 2000 に設定します。

以下の例では、2000 はアニメーションの長さである 2 秒に相当します。最初、ページが読み込まれると、不透明度は 0 になり、2 秒以内に 1 に変わります。

このように、フェードイン効果は jQuery を使用して実現されます。

サンプルコード：

body {
    opacity: 0;
}

$('body').animate({'opacity': '1'}, 2000);

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>