今作っているサービスで背景色を点滅させたい、ということがあったのでテスト的に書いてみました。

cssのアニメーションを設定するだけで可能です。

コードはこちら。

See the Pen 背景色を点滅させるアニメーションサンプル by Makoto Ohnami (@zohnami) on CodePen.

htmlはなんてことないですが、cssを改めて眺めてみましょう。

.boxの要素クラスにアニメーションを仕込んでいます。

点滅を繰り返すようにanimation-iteration-count: infinite;としています。

.container {
  display: grid;
  place-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #a0d8ef;
  text-align: center;
  line-height: 200px;
  vertical-align: middle;

  animation-name: flashing;
  animation-duration: 2.4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes flashing {
  0% {
    background-color: #a0d8ef;
  }

  50% {
    background-color: #0095d9;
  }
  
  100% {
    background-color: #a0d8ef;
  }
}

もうひとつポイント。

keyframeのflashingは50%のところで色を切り替えて、また100%のところで元の色に戻すようにしています。

例えば100%のところで色を完全に切り替えるようにしてしまうと、色が変わった後は0%に戻るのでそこだけスパッと色が変わったようになってしまいます。

100%になるまでは徐々に色が変わっていくことで点滅を演出しているので、100%から0%に戻るときだけ急に切り替わると不自然に見えます。

今回は.boxのクラスにアニメーションの設定を直接書き込んでいますが、実際に使うときはアニメーション専用のクラスに設定を書き、状況に応じてクラスを追加、削除とかするのがセオリーかなと思います。

この記事の環境情報

  • Google Chrome 108.0.5359.124

あとがき

点滅なんて使う？って思うかもしれませんが、これがあるんです。

タイマーを使うSPAみたいのを作ってるんですが、時間が経過したら点滅をさせたくなってしまって。