発信中アニメーション


チャットボットにコードの叩き台を作ってもらうのが難しいことの一つにアニメーション表現がありますが、そんな中でも通話アプリで相手先への発信中を表現する、4つの円が順番に拡大縮小を繰り返すというものが半分以上自作することになったので紹介しておきます。onクラスの付与で発動するタイミングやLIタグで決まる円の数とscaleAnimation内の割合は適宜調整してください。

section > header > ul {width:10vw; height:2vw; display:flex; justify-content:space-around; align-items:center; margin-top:6vh;}
section > header > ul > li {width:1.5vw; height:1.5vw; background-color:#57e08a; border-radius:50%; transform: scale(0);}
section > header > ul.on > li {animation: scaleAnimation 1.5s infinite;}
section > header > ul > li:nth-child(1) {animation-delay: 0s;}
section > header > ul > li:nth-child(2) {animation-delay: 0.2s;}
section > header > ul > li:nth-child(3) {animation-delay: 0.4s;}
section > header > ul > li:nth-child(4) {animation-delay: 0.6s;}

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

<section><header><ul><li></li><li></li><li></li><li></li></ul></header><main></main><footer></footer></section>

document.querySelector('section > header > ul').classList.add('on')

4つの円が左から順に拡大後に縮小を繰り返し、通話アプリが発信中である画面や読み込み中を表すような場面で利用することができます。