【CSS】点滅させる<blink>をCSSアニメーションで実装する

i-mode全盛期には多かった<blink>を使った文字の点滅。
<blink>が非推奨になった後、廃止されたので、使いたいときが出てきたらどうやって実装するの?と思う瞬間が来るかもしれません。点滅というのが、どれだけの効果を持つかはサイトによって違うのでココでは言及しませんが、もしかしたら使いたい場面は来るかもしれません。

そんなときは、CSSアニメーションを使うことで対応できます。

<blink>はHTMLタグなので、

で実装できました。

これをCSSアニメーションで実装するには、

のように、点滅させたいもののタグにclass設定をしたのちにCSSを作っていきます。

今回はvisibilityを使ってみましたが、opacityを使ってみてもいいかも。opacityを使うと、点滅がフワッとした感じになると思います。

これを上のHTMLに適用すると、↓のような感じ。

7 views/total