【CSS】アニメーション（animation）でパカパカ「点滅」を作る

こんにちは、さちです。

先日、「CSS」でパカパカと点滅するアニメーション（animation）を作りたいことがありました。

通常は滑らかにアニメーションしますが、あえて唐突に切り替わるアニメーションで点滅させたかったんです。

animation-timing-function: steps(1, end); で簡単に作れると思ったのですが、期待通りの動きをしてくれず、解決までに少し悩んでしまいました。

ということで、今回は「CSS」の点滅アニメーションを作る方法の備忘録です。

実装方法
- サンプルソース
- 結果
作ってみた（作例集）
- 回転灯
- 踏切

実装方法

サンプルソース

サンプルとして、点滅する歩行者信号機を作ってみました。

<div class="signal">
  <div class="blink red">stop</div>
  <div class="blink green">walk</div>
</div>

.blink {
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.red{
  animation-name: red;
}
@keyframes red {
    0% { color: rgba(222, 76, 61, 1  ); }
  100% { color: rgba(222, 76, 61, 0.3); }
}

.green {
  animation-name: green;
}
@keyframes green {
   0% { color: rgba(0, 255, 180, 1  ); }
  50% { color: rgba(0, 255, 180, 0.3); }
}

@keyframes red は 100% のときに不透明度を変更しています。やりがちなこの記述ですが、全然アニメーションしません。

対して、@keyframes green は 50% のときに不透明度を変更しています。この記述であれば、ちゃんとアニメーションします。

結果

表示結果

man

directions_walk

@keyframes red はまったく変化がありません。右図のように 100% になる瞬間しか不透明度が変わらないからです。

@keyframes green はちゃんと点滅しています。右図のように 50% で不透明度が変更されるからですね。

作ってみた（作例集）

点滅アニメーションを使っていくつか作ってみました。

アニメーション(animation)関連以外のソースの記述は省略しています

回転灯

<div class="light" style="--delay:    0ms;"></div>
<div class="light" style="--delay:  100ms;"></div>
<div class="light" style="--delay:  200ms;"></div>
<div class="light" style="--delay:  300ms;"></div>
<div class="light" style="--delay:  400ms;"></div>
<div class="light" style="--delay:  500ms;"></div>
<div class="light" style="--delay:  600ms;"></div>
<div class="light" style="--delay:  700ms;"></div>
<div class="light" style="--delay:  800ms;"></div>
<div class="light" style="--delay:  900ms;"></div>
<div class="light" style="--delay: 1000ms;"></div>
<div class="light" style="--delay: 1100ms;"></div>

.light {
  background: #555;
  animation: light 1200ms infinite steps(1, end);
  animation-delay: var(--delay);
}

@keyframes light {
   0% { background: #7DA; }
  10% { background: #555; }
  33% { background: #D45; }
  43% { background: #555; }
  66% { background: #CCC; }
  76% { background: #555; }
}

表示結果

踏切

<div class="warning-light" style="--direction: normal;"></div>
<div class="warning-light" style="--direction: reverse;"></div>

.warning-light {
  animation: warning-light 1s infinite steps(1, end);
  animation-direction: var(--direction);
}

@keyframes warning-light {
   0% { background: #300; filter: drop-shadow(0 0 0   #E33A); }
  50% { background: #E33; filter: drop-shadow(0 0 6px #E33A); }
}

表示結果