【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 stop は、まったく変化がありません。右の図のようにタイムラインが 100% になる瞬間しか不透明度が変わらないからです。

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

作ってみた（作例集）