【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% にしています。この記述なら、ちゃんとアニメーションをします。

結果

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

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

作ってみた（作例集）

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

回転灯

<div class="light" style="--delay:   0ms;"></div>
<div class="light" style="--delay:  50ms;"></div>
<div class="light" style="--delay: 100ms;"></div>
<div class="light" style="--delay: 150ms;"></div>
<div class="light" style="--delay: 200ms;"></div>
<div class="light" style="--delay: 250ms;"></div>
<div class="light" style="--delay: 300ms;"></div>
<div class="light" style="--delay: 350ms;"></div>
<div class="light" style="--delay: 400ms;"></div>
<div class="light" style="--delay: 450ms;"></div>
<div class="light" style="--delay: 500ms;"></div>
<div class="light" style="--delay: 550ms;"></div>

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

@keyframes light {
   0% { background: #FC0; }
  12% { background: #333; }
}

踏切遮断機

<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); }
}

関連記事

【CSS】 アニメーション（animation）を少しズラして使い回す

こんにちは、さち です。「CSS」の animation 機能を使うと、ウェブサイト上の「アニメーション」を比較的簡単に作ることができます。ただ、animation って記述量が多いので、何個も書くのは嫌なんですよね……。（前より楽になって

at.sachi-web.com

2026.07.08