【HTML/CSS】画像フェードインアニメーション

概要

以下のアニメーションをCSSで実装します
①3枚の画像が順番に切り替わり表示する

HTML

<div id="home">
    <ul class="fade"> <!-- スライドイメージ -->
        <li><img src="images/mainvisual1.jpg" alt=""></li>
        <li><img src="images/mainvisual2.jpg" alt=""></li>
        <li><img src="images/mainvisual3.jpg" alt=""></li>
    </ul>
</div><!-- /home -->

Sass

/*------------------------------------------- #home 
-------------------------------------------*/ #home  {
    height   : 720px;    /* ホームセクションの高さを設定 */  
    position : relative; /* 相対位置を設定 */

/* 画像フェードインアニメーション */
    .fade {
        li {
            width   : 75%;      /* 画像の幅を設定 */
            position: absolute; /* 絶対位置を設定 */
            top     : 0;        /* 上端に配置 */
            right   : 0;        /* 右端に配置 */
            opacity : 0;        /* 最初は不透明度を0に設定 */
            animation: fade 15s infinite; /* fadeアニメーションを15秒ごとに無限に繰り返し実行 */

            /* 画像ごとにアニメーション遅延を設定 */
            &:nth-child(1) {
                animation-delay : 0s;  /* 1番目の画像の遅延時間を0秒に設定 */
            }
            &:nth-child(2) {
                animation-delay : 5s;  /* 2番目の画像の遅延時間を5秒に設定 */
            }
            &:nth-child(3) {
                animation-delay : 10s; /* 3番目の画像の遅延時間を10秒に設定 */
            }

            /* 画像のサイズを調整 */
            img {
                width      : 100%;
                height     : 720px;
                object-fit : cover; /* 画像を領域に合わせて調整 */
            }

            /* 画像に影を追加 */
            &::after {
                content    : "";       /* 疑似要素を生成 */
                position   : absolute; /* 絶対位置を設定 */
                top        : 0;        /* 上端に配置 */
                bottom     : 0;        /* 下端に配置 */
                left       : 0;        /* 左端に配置 */
                right      : 0;        /* 右端に配置 */
                box-shadow : inset 0px 0px 20px 20px #fff ; /* 影を追加 */
            }
          }
        }

        /* 画像フェードインアニメーションのキーフレーム */
        @keyframes fade {
            0% { opacity: 0;} /* 非表示の状態からスタート */
            5% { opacity: 1;} /* 15%になるまでの間に少しづつ画像を表示（フェードイン）させる */
           30% { opacity: 1;} /* そこから30%の時点までは画像を表示させたままの状態を維持し */
           45% { opacity: 0;} /* 45%の時点に向けて画像を非表示（フェードアウト）する */
          100% { opacity: 0;} /* そこから100%まで非表示の状態を維持する */
        }
}

解説

li {
    width   : 75%;      /* 画像の幅を設定 */
    position: absolute; /* 絶対位置を設定 */
    top     : 0;        /* 上端に配置 */
    right   : 0;        /* 右端に配置 */
    opacity : 0;        /* 最初は不透明度を0に設定 */
    animation: fade 15s infinite; /* fadeアニメーションを15秒ごとに無限に繰り返し実行 */

横幅を指定し絶対位置を指定します※相対指定は親要素に設定済み
topとrightを0にすることで右寄せにします
opacity0で完全透明にし、後程CSSアニメーションで表示させます

"animation"
アニメーションを要素に適用するためのプロパティ
"fade"
アニメーション名の定義※JavaScriptでのアニメーション関数に似ている
"15s"
アニメーション期間(duration)を指定※アニメーションを一巡するのに15秒
"infinite"
アニメーションの繰り返し回数※無限に繰り返す

以上によって「fade」というアニメーションが1周15秒かけて実行され、
無限に繰り返されます。

遅延設定

/* 画像ごとにアニメーション遅延を設定 */
            &:nth-child(1) {
                animation-delay : 0s;  /* 1番目の画像の遅延時間を0秒に設定 */
            }
            &:nth-child(2) {
                animation-delay : 5s;  /* 2番目の画像の遅延時間を5秒に設定 */
            }
            &:nth-child(3) {
                animation-delay : 10s; /* 3番目の画像の遅延時間を10秒に設定 */
            }

3枚の画像をそれぞれnth-childで指定し
アニメーションを開始するか"animation-delay"を設定。

1枚目が0秒なので即反映
2枚目が5秒後に反映
3枚目が10秒後に反映

画像の内側の影設定

/* 画像に影を追加 */
            &::after {
                content    : "";       /* 疑似要素を生成 */
                position   : absolute; /* 絶対位置を設定 */
                top        : 0;        /* 上端に配置 */
                bottom     : 0;        /* 下端に配置 */
                left       : 0;        /* 左端に配置 */
                right      : 0;        /* 右端に配置 */
                box-shadow : inset 0px 0px 20px 20px #fff ; /* 影を追加 */
            }

::after疑似要素が親要素であるliに対して配置する設定です。
この四方を全て0にすることで疑似要素を親要素に対して完全に覆う事が出来ます。

覆うのはbox-shadow
要素の内側に20pxのぼかしを持つ白い色の影を追加

画像フェードインアニメーションのキーフレーム

/* 画像フェードインアニメーションのキーフレーム */
@keyframes fade {
    0%   { opacity: 0;} /* 非表示の状態からスタート */
    5%   { opacity: 1;} /* 5%になるまでの間は非表示のまま */
    30%  { opacity: 1;} /* 30%になるまでの間に画像を徐々に表示（フェードイン） */
    45%  { opacity: 0;} /* 45%の時点まで画像を表示したまま */
    100% { opacity: 0;} /* 最終的に非表示の状態へ */

”fade”という名前のアニメーションを定義していて、内容は要素の透明度(opacity)を時間の経過とともに変化させています。

％はアニメーションの進行状況のことで
0％が開始時点　→　100％が終了時点

0％では完全透明の状態(opacity 0)
5％～徐々に表示し30％で完全表示
45％まで表示させ続けて
45％から100％にかけて徐々に完全透明にする