【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% で不透明度が変更されるからですね。

【余談】 「jump-none」を使う方法

実は @keyframes red のような記述でも、animation-timing-function を steps(2, jump-none) にすれば点滅できます。jump-none の詳細は下記リンク先の記事で解説しています。

【CSS】 animation のコマ送り steps() を理解する

こんにちは、さち です。先日、CSS でパカパカ点滅するアニメーションを作る方法について記事を書き、animation の steps() を使って実装しました。そのときに、steps() の仕様や使い方についても説明しようと思ったんですが

at.sachi-web.com

2026.08.19

作ってみた（作例集）

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

回転灯

<div class="light" style="--delay: 0s;"></div>
<div class="light" style="--delay: 0.1s;"></div>
<div class="light" style="--delay: 0.2s;"></div>
<div class="light" style="--delay: 0.3s;"></div>
<div class="light" style="--delay: 0.4s;"></div>
<div class="light" style="--delay: 0.5s;"></div>
<div class="light" style="--delay: 0.6s;"></div>
<div class="light" style="--delay: 0.7s;"></div>
<div class="light" style="--delay: 0.8s;"></div>
<div class="light" style="--delay: 0.9s;"></div>
<div class="light" style="--delay: 1.0s;"></div>
<div class="light" style="--delay: 1.1s;"></div>

.light {
  background: #555;
  animation: light 1.2s 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); }
}

関連記事

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

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

at.sachi-web.com

2026.07.08

【CSS】 animation のコマ送り steps() を理解する

こんにちは、さち です。先日、CSS でパカパカ点滅するアニメーションを作る方法について記事を書き、animation の steps() を使って実装しました。そのときに、steps() の仕様や使い方についても説明しようと思ったんですが

at.sachi-web.com

2026.08.19