【CSS】メニューアイテムが順番に表示されるフェードインアニメーション

こんにちは、Ryohei（@ityryohei）です！

本記事では、メニューアイテムが順番に表示されるアニメーションの実装方法をご紹介しています。

今回実現したいこと

今回実現したいのは、ページ読み込み完了時にヘッダーやフッター、サイドといったメニューのアイテムがフェードインで表示されるアニメーションになります。スクリプトは使用せずに「CSS」だけで実装します。

完成すると下記デモのような表示となります。「RunPen」を押すとアニメーションが再生され、サイドメニューのメニューアイテムが上から順番にフェードインで表示されるかと思います。

See the Pen
PooKVpd by ryohei (@intotheprogram)
on CodePen.

デモではサイドに設置したメニューを使用していますが、ヘッダーやフッターにも応用することができますので最終的にお好きな場所に実装していただければと思います。

では、解説していきます。

HTMLでメニューを作成する

まずはHTMLでメニューを作成します。すでにコーディングがお済みの場合はこの項目はスキップしていただいて大丈夫です。まだの方は簡単なメニューを作成しましょう。

HTML

<nav>
    <ul>
        <li><a href="#">Item01</a></li>
        <li><a href="#">Item02</a></li>
        <li><a href="#">Item03</a></li>
        <li><a href="#">Item04</a></li>
        <li><a href="#">Item05</a></li>
        <li><a href="#">Item06</a></li>
        <li><a href="#">Item07</a></li>
        <li><a href="#">Item08</a></li>
        <li><a href="#">Item09</a></li>
        <li><a href="#">Item10</a></li>
    </ul>
</nav>

以上でメニューの作成は完了です。続いてメニューを順番に表示させるためのスタイルの準備をしていきます。

@keyframesでフェードインを作成する

本記事では、メニューアイテムを順番に表示させるために「@keyframes」と「animation」を使用します。そのため「@keyframes」で「animation」の実行に必要なスタイルの変化（ここでは「opacityでフェードイン）を作成しておきます。

下記は「@keyframes」でフェードインの変化を作成した場合のサンプルです。「opacity」の値で透明度を変更しています。「translateX」はフェードインと同時に横からスライドインさせるために指定していきます。

@keyframes

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

以上で「@keyframes」の準備は完了です。最後に作成したメニューにスタイルを定義してきます。

メニューにスタイルを定義する

前項で作成した「@keyframes」の内容をスタイルに落とし込みます。順番に表示させるための設定は「li」に定義しています。特に「animation」部分が重要です。他の部分はデモのデザインのままですので、お好きな内容に変更してご使用ください。

SCSS

nav {
    width: 250px;
    height: 100vh;
    background-color: #384878;
    
    ul {
        height: 100%;
        overflow: auto;
        
        li {
            transform: translateX(-150%);
            animation-name: fadeIn;
            animation-duration: 1s;
            animation-fill-mode: forwards;

            &:nth-child(1){ animation-delay: .2s; }
            &:nth-child(2){ animation-delay: .3s; }
            &:nth-child(3){ animation-delay: .4s; }
            &:nth-child(4){ animation-delay: .5s; }
            &:nth-child(5){ animation-delay: .6s; }
            &:nth-child(6){ animation-delay: .7s; }
            &:nth-child(7){ animation-delay: .8s; }
            &:nth-child(8){ animation-delay: .9s; }
            &:nth-child(9){ animation-delay: 1s; }
            &:nth-child(10){ animation-delay: 1.1s; }
            
            a {
                display: block;
                padding: 10px;
                color :#ffffff;
                text-decoration: none;
            }
        }
    }
}

最後に

いかがでしたでしょうか。

「@keyframes」と「animation」の使い方を知っておくことでCSSだけで多くのアニメーションが実現できるようになります。仕様把握に少し時間が掛かるかもしれないですが、Web制作で大いに役に立つプロパティなので、どこかで時間を取って勉強しておくと良いかもしれません。本サイトでも使い方を紹介していますので、お時間があるときにでもご参照いただければ幸いです。