[CSS ] 読み込み中アニメーションをCSSで描きたい

外部のメールフォームやアドセンス広告などは、提供元のサーバーから読み込んで表示するまでに時間がかかる場合があります
こういった要素には読み込み中のアニメーションをつけておいた方が親切ですし、読み込み中表示することで、そこに何らかのコンテンツが存在することを気づいてもらいやすくなります
読み込み中アニメーションはgif画像を用いることがほとんどですが、CSSの「animation」プロパティを使うことでgif画像なしで動きのある表現をすることができます

動作イメージ

サンプルコード

html

<div class="loading">
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

.loading {
    display: flex;
    justify-content: center;
}

.loading > span {
    margin: 0px 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #888;
    animation: loading_anime 1s linear 0s infinite normal both;
}
.loading > span:nth-of-type(2) {
    animation-delay: 0.2s;
}
.loading > span:nth-of-type(3) {
    animation-delay: 0.4s;
}

@keyframes loading_anime {
    0% {
        transform: scale(0);
    }
    25% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

サンプルコードの解説

「animation」プロパティの設定

.loading > span {
    〜
    animation: loading_anime 1s linear 0s infinite normal both;
}

アニメーションさせる3つのspan要素に対して「animation」プロパティを設定します
「animation」で7つのパラメーターを一括で設定しています。設定内容は以下の通りです

loading_anime: 後ほど設定する、アニメーションの内容を決める「@keyframes」プロパティの名前を指定します
1s: アニメーション全体の秒数です。今回は1秒間のアニメーションとなります
linear: アニメーション中の動きの早さに緩急をつけるかの指定です。今回は緩急をつけず直線的な動きとなります
0s: アニメーション開始までの待ち時間の指定です。一旦ここでは0秒としています
infinite: アニメーションを繰り返す回数の指定です。「infinite」とすることで、回数無制限のループアニメーションとなります
normal: アニメーションの再生方向（逆再生）の指定です。再生方向は単純な順方向になります
both: アニメーションの開始時と終了時のプロパティ状態を指定します。開始時、終了時共に「@keyframes」で指定したプロパティを適用したままにするため「both」としています

8つ目のパラメーターとして「animation-play-state」というアニメーションの再生状態を設定するパラメーターがあります
この値を初期値である「running」に設定すると、なぜかIE11でアニメーションが動作しなくなってしまいます
「paused」とするわけにもいかないので、サンプルではこの「animation-play-state」だけ設定を省略しています

「@keyframes」プロパティでアニメーションの内容を決める

@keyframes loading_anime {
    0% {
        transform: scale(0);
    }
    25% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

アニメーションの内容を決めるプロパティです
パーセントごとに適用したいプロパティを設定することで、時間ごとの動きを設定します
今回は丸の大きさだけを変えていくので「transform: scale」の値を時間経過で変えていきます

0秒〜250ミリ秒: scaleを「0」から「1」まで徐々に増やしていく
251〜750ミリ秒: scaleを「1」のまま維持
751ミリ秒〜1000ミリ秒: scaleを「1」から「0」まで徐々に減らしていく

要素ごとに時間差を設ける

.loading > span:nth-of-type(2) {
    animation-delay: 0.2s;
}
.loading > span:nth-of-type(3) {
    animation-delay: 0.4s;
}

三つの円をずらしてアニメーションさせるために、「animation-delay」で待ち時間を設定します

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

[CSS] 読み込み中アニメーションをCSSで描きたい

動作イメージ

サンプルコード

html

CSS

サンプルコードの解説

「animation」プロパティの設定

「@keyframes」プロパティでアニメーションの内容を決める

要素ごとに時間差を設ける

ご質問など受け付けています