【CSSアニメーション】時間差でフェードインさせる方法を解説

なやむくん

ただのフェードインではなく、次々にフェードインさせて要素を表示させたい

なやむさん

フェードインで見せ方に一工夫を加えたい…

などの疑問や悩みを解決してまいります。

フェードインさせて要素を表示させるサイトをよく見ますが、シンプルにかっこいいですよね。

しかし、さらに見せ方に一工夫加えたいと思っている方もいるのではないでしょうか。

今回は時間差でコンテンツをフェードインさせる方法を解説します。

みつた

フェードインでの魅せ方に一工夫加える事でかっこよさが増します！

本記事の前にスクロールして要素をフェードインさせる方法について学びたい方は下記からどうぞ。

まずは完成形を見てみましょう。

See the Pen 時間差フェードイン by koutarou mori (@koutarou-mori) on CodePen.

このようにコンテンツをそれぞれ指定した時間で表示させています。

このフェードインさせる時間とコンテンツの配置を工夫することでさまざまな見せ方ができるので、ぜひこの時間差フェードインを学んで欲しいと思います。

もえるくん

頑張って学んでいきます！

HTMLの解説

<body>
    <div class="inner">
        <div class="fadeInBlock">
            <div class="block fadeIn1500ms">
                1.5秒遅れで下から上に移動しながら<br>フェードイン
            </div><!-- /.block -->
            <div class="block fadeIn1s">
                1秒遅れで上から下に移動しながら<br>フェードイン
            </div><!-- /.block -->
            <div class="block fadeIn500ms">
                0.5秒遅れで右から左に移動しながら<br>フェードイン
            </div><!-- /.block -->
            <div class="block fadeIn2s">
                2秒遅れで左から右に移動しながら<br>フェードイン
            </div><!-- /.block -->
        </div><!-- /.fadeInBlock -->
    </div><!-- /.inner -->
</body>

フェードインさせるコンテンツにblockクラスを指定し、それぞれにフェードイン用のクラスを追加で指定しています。

今回フェードイン用のクラスは、0.5秒後にフェードインをするfadeIn500msクラス、1秒後にフェードインをするfadeIn1sクラス、1.5秒後にフェードインをするfadeIn1500msクラス、2秒後にフェードインをするfadeIn2sクラスを用意しました。

CSSの解説

CSSはフェードインの動きに関する箇所に絞って解説していきます。

/* レイアウトCSS */
.inner {
    width: 100%;
    max-width: 1000px;
    margin: 100px auto;
}
.fadeInBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.block {
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    padding: 50px 20px;
}

/* ここから時間差フェードインアニメーション */
/* 1秒間かけてフェードイン */
.fadeIn1s {
    animation-name: fadeIn1s;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}
@keyframes fadeIn1s {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 1.5秒間かけてフェードイン */
.fadeIn1500ms {
    animation-name: fadeIn1500ms;
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}
@keyframes fadeIn1500ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 0.5秒間かけてフェードイン */
.fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(50px);
    opacity: 0;
}
@keyframes fadeIn500ms {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* 2秒間かけてフェードイン */
.fadeIn2s {
    animation-name: fadeIn2s;
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
}
@keyframes fadeIn2s {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

フェードインさせる要素をopacity: 0;で非表示にする

まずフェードインの動きを実装するので、フェードインさせるコンテンツは最初非表示にしておきます。

そのため非表示とするコンテンツにはopacity: 0;で非表示にします。

animation-nameプロパティでアニメーションの名前を指定する

CSSアニメーションを実装するためにはアニメーションの名前を決めなくてはなりません。

ここで決めた名前を@keyframesにセットすることでアニメーションを実装することができます。

今回は分かりやすくアニメーションが開始される秒数にちなんだ名前にしています。

0.5秒後にフェードインアニメーション開始　⇒　fadeIn500ms

1秒後にフェードインアニメーション開始　⇒　fadeIn1s

1.5秒後にフェードインアニメーション開始　⇒　fadeIn1500ms

2秒後にフェードインアニメーション開始　⇒　fadeIn2s

animation-delayプロパティでアニメーションの開始時間を指定

今回の時間差フェードインを実現する上で欠かせないプロパティです。

animation-delayプロパティでアニメーションの開始時間を指定することができます。

時間を指定する際の単位は以下の通りです。

ポイント

〇　「s」は秒単位を示し、1sとすると1秒ということになる

〇　「ms」はミリ秒単位を示し、1000msで１秒となる（0.5sだと500msと同じになり0.5秒ということになる）

なやむさん

単位の「ms」とはどのような単位なのでしょうか？

みつた

「ms」は1000msで「1秒」なので、750msとすると0.75秒、500msとすると0.5秒、250msとすると0.25秒ということになります。

今回は以下のようにそれぞれ指定しています。

0.5秒後にフェードインアニメーション開始　⇒　500ms

1秒後にフェードインアニメーション開始　⇒　1s

1.5秒後にフェードインアニメーション開始　⇒　1500ms

2秒後にフェードインアニメーション開始　⇒　2s

animation-durationプロパティで再生時間を指定

animation-durationプロパティはアニメーションが開始してから終了するまでの時間を指定するプロパティです。

値に指定できる時間はanimation-delayプロパティと同様です。

今回は1.5秒間の間で要素をフェードイン表示させたいのでanimation-duration: 1.5s;を指定しています。

animation-fill-mode: forwards;でアニメーション終了状態を維持

通常ですとCSSアニメーションは、一度アニメーションが実行されるとアニメーション開始前の状態に戻ってしまいます。

animation-fill-mode: forwards;を指定することでアニメーションの終了した状態で維持してくれます。

要素を動かすためにtransformプロパティのtranslate()関数を使用する

要素を動かしながらフェードインさせるためには要素のスタート位置を決めて、アニメーション終了後には元々の位置に戻す動きを作る必要があります。

これを実現するためにtransformプロパティのtranslate()関数を使用します。

例えば上から下に50px移動しながらフェードインさせたい場合は、transform: translateY(-50px);をスタート位置に指定して、アニメーション終了時にtransform: translateY(0);とすることで実装することができます。

みつた

この動きを@keyframesで設定していきます。

@keyframesで終了時にtransformプロパティのtranslateY(0);もしくはtranslateX(0);で位置を戻す

それぞれの要素はtransformプロパティのtranslate()関数で位置を指定していると解説しました。

@keyframesの終了時にtranslate()関数の値を0とすることで、スタート位置から元の位置に戻る動きを、フェードインしながら実現してくれます。

translateY()関数に値を指定してスタート位置を決めて、@keyframesの終了時に値を0とすることで縦の動きを、translateX()関数に値を指定して@keyframesの終了時に値を0とすることで横の動きを実現することができます。

@keyframesの終了時にopacity: 1;として要素を表示

フェードインさせる要素は原則として最初は要素を非表示にする必要があります。

なのでフェードイン用のクラスにはopacity: 0;を指定して要素を透明にしました。

@keyframesの終了時にopacity: 1;を指定することで要素を表示させることができます。

jQueryを使用してスクロールに連動して時間差フェードインを実装する

次に応用でスクロールに連動して時間差フェードインを実装していきます。

みつた

スクロールに連動して時間差フェードインは使用されるケースが多いです！

まずは完成形を見てみましょう。

スクロールに連動した時間差フェードインの完成例は以下です。

See the Pen 時間差フェードイン（スクロール連動） by koutarou mori (@koutarou-mori) on CodePen.

最初に解説したコードを少し変更して、スクロールに連動した時間差フェードインを実装しています。

変更している箇所のみ解説していきます。

CSSの解説

今回変更となっているのはanimation-nameプロパティを今回用意した新たなクラスに移動させています。

.fadeInAnime1s {
    animation-name: fadeIn1s;
}
.fadeInAnime1500ms {
    animation-name: fadeIn1500ms;
}
.fadeInAnime500ms {
    animation-name: fadeIn500ms;
}
.fadeInAnime2s {
    animation-name: fadeIn2s;
}

このクラスを一定の高さまでスクロールしたら、フェードインさせる要素にJQueryを使用して追加するようにしています。

みつた

追加されたらフェードインが開始される仕組みです。

jQueryの解説

$(function () {
    // ウィンドウをスクロールしたら…
    $(window).scroll(function () {
        // ウィンドウの高さを取得
        const wHeight = $(window).height();
        // スクロールした量を取得
        const wScroll = $(window).scrollTop();
            // それぞれのblockクラスに対して…
            $(".block").each(function () {
                // それぞれのblockクラスのウィンドウからの高さを取得
                const bPosition = $(this).offset().top;
                // スクロールした量が要素の高さを上回ったら
                // その数値にウィンドウの高さを引き、最後に200pxを足す
            if (wScroll > bPosition - wHeight + 200) {
                    $(".fadeIn1s").addClass("fadeInAnime1s");
    $(".fadeIn750ms").addClass("fadeInAnime750ms");
    $(".fadeIn500ms").addClass("fadeInAnime500ms");
    $(".fadeIn250ms").addClass("fadeInAnime250ms");
            }
        });
    });
});

スクロールに連動してフェードインさせる方法は、以下記事に解説がございます。

時間差でフェードインさせる方法のまとめ

みつた

ここまでお疲れ様でした！今回のまとめです。

ポイント

フェードインさせる要素はあらかじめopacity: 0;で非表示にしておく
animation-nameプロパティでアニメーションの名前を指定する
animation-delayプロパティでアニメーションの開始時間を指定
animation-durationプロパティで再生時間を指定
秒数の単位は「s」、ミリ秒の単位は「ms」で指定することができる
animation-fill-mode: forwards;でアニメーション終了状態を維持
@keyframesで終了時にtransformプロパティのtranslateY(0);もしくはtranslateX(0);で要素の位置を元に戻す
@keyframesの終了時にopacity: 1;として要素を表示
addClass()関数はクラスを追加する関数