モダンブラウザで blink

CSS の text-decoration プロパティの設定値として、blink というものがかつて存在しました。

#some-element {
  text-decoration: blink;
}

これは、かの有名な BLINK タグと同じく、「テキストを点滅させる」というとっても素敵な効果を実現するためのものでした。

いや、正確にいうと、現在の CSS でも blink は有効な設定値の一つとして残ってはいますが、非推奨となっていて、blink による点滅を実装したブラウザは今ではもう存在しません¹。

blink が使えないことは大抵の人にとってはどうでもいいことだと思われますが、中には「点滅しない Web なんてクリープしていないコーヒーみたいなもんだ」という人もいるかも知れません。そういう人のために、CSS3 Animation を利用してかつての BLNK タグのような点滅を実現する方法を紹介します。

@keyframes blink {
  75% { opacity: 0.0; }
}
#some-element {
  /* text-decoration: blink; の代わりに以下の指定を入れる */
  animation: blink 1s step-end infinite;
}

IE11、Edge、Firefox、Chrome² はこの指定で動作しました。一方 Safari ではこのままでは動作せず、ベンダ接頭辞（-webkit）を付ける必要があるようです。なので、それも一緒に設定したものを書いておきます。

@keyframes blink {
  75% { opacity: 0.0; }
}
@-webkit-keyframes blink {
  75% { opacity: 0.0; }
}
#some-element {
  animation: blink 1s step-end infinite;
  -webkit-animation: blink 1s step-end infinite;
}

ちなみに、この設定を利用すると、テキスト以外のもの（画像など）も点滅させることができます。というわけで、皆さん早速、点滅する素敵な Web ページを作りましょう！

1. 最後まで残っていた Firefox が 2013 年 3 月頃にサポートを取りやめました。 ↩

2. Chrome はバージョン43以降でベンダ接頭辞（-webkit）が不要になりました。 ↩