ミギムキ

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

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

動作イメージ

サンプルコード

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」で待ち時間を設定します
スポンサー広告