[CSSのみ]複数の画像を泡の様にフェードイン・アウト

CSS

/* 基本設定 */
.fade-bubble img {
    height: auto;
    width: 100%;
    vertical-align:top;
}
.fade-bubble {
    width: 100%;
    max-width: 800px; /* 全体の最大横サイズ(*1) */
    position: relative;
}
.fade-bubble::before {
    content: "";
    display: block;
    padding-top: calc(5 / 14 * 100%); /* 全体のアスペクト比(*2) */
}
.fade-bubble figure {
    position: absolute;
    height: auto;
    width: 40%; /* 基本画像サイズ(*3) */
    margin: 0;
}
.fade-bubble img {
    opacity: 0;
    animation: fade-bubble 18s infinite forwards; // アニメーションの設定と全体の時間を設定(*4)
}

/* 画像の位置とサイズ(*5) */
.fade-bubble figure:nth-of-type(1) {
    top: 0;
    left: 0;
    }
.fade-bubble figure:nth-of-type(2) {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 35%;
}
.fade-bubble figure:nth-of-type(3) {
    right: 0;
    top: 5%;
}
.fade-bubble figure:nth-of-type(4) {
    left: 0;
    bottom: 5%;
}
.fade-bubble figure:nth-of-type(5) {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 35%;
}
.fade-bubble figure:nth-of-type(6) {
    right: 0;
    bottom: 0;
}

/* 画像表示タイミング(*6) */
.fade-bubble figure:nth-of-type(1) img {
    animation-delay: 0s;
}
.fade-bubble figure:nth-of-type(2) img {
    animation-delay: 3s;
}
.fade-bubble figure:nth-of-type(3) img {
    animation-delay: 6s;
}
.fade-bubble figure:nth-of-type(4) img {
    animation-delay: 9s;
}
.fade-bubble figure:nth-of-type(5) img {
    animation-delay: 12s;
}
.fade-bubble figure:nth-of-type(6) img {
    animation-delay: 15s;
}

/* アニメーション設定(*7) */
@keyframes fade-bubble {
    0% {
        transform: scale(50%);
        opacity: 0;
    }
    20% {
        transform: scale(100%);
        opacity: 1;
    }
    40% {
        transform: scale(100%);
    }
    45% {
        opacity: 1;
    }
    55% {
        opacity: 0;
    }
}

1. 画像の横幅は親要素に対するパーセントで設定しているので全体要素の最大横サイズを設定。
2. レスポンシブに対応させるため縦幅をアスペクト比で決定します。画像のアスペクト比とかけ離れてしまうと綺麗に表示できない。
3. 基本画像サイズを横幅に対するパーセンテージで設定。
4. 全体の時間は全てのループにかかる時間を設定。
   今回は6枚の画像を3秒おきに表示するため、3*6＝18秒を設定した。
5. 画像の位置を設定。画像ごとにサイズを変更したい場合はここで指定する。
6. 画像の表示タイミングを設定。
   今回は画像1枚あたり3秒とする。
7. 画像に適応するアニメーションの設定。