CSSのコーディング作業の際にテキストを点滅させる機会があったので、メモとしてまとめておきます。

htmlでは＜blink＞タグが一般的でしたが現在の全ブラウザで未サポートです。
代替として＜marguee＞で点滅させるのが一般的となりましたが、＜marquee＞で点滅させるのがどうにも古臭いというか、チカチカした昔のホームページを思い出すので自分としては少々敬遠しちゃいます。
CSSで実装できないかなと調べたらありました(・∀・)

※CSSでもtext-decoration:blink;でも点滅させれますが、非推奨のようですね。

Css Animationで点滅させます

何をしてるかというと、CSSでアニメーション速度を調節して、透明度を0〜100と繰り返す動きをつけるということです。

CSSコードはこう！

.tenmetsu{
-webkit-animation:blink 1.5s ease-in-out infinite alternate;  
-moz-animation:blink 1.5s ease-in-out infinite alternate;  
animation:blink 1.5s ease-in-out infinite alternate;   
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;
}

1.5秒(1.5s)で、 イーズイン・アウト(ease-in-out)して、無限ループ(infinite)して、反復アニメーション(alternate)しろって言ってます。
※-moz-や-webkit-でベンダープレフィックスもつけときます。

HTMLはこんな感じ

<span class="tenmetsu">点滅させたいテキストや画像</span> 

点滅させたい物にclass指定をするだけ。
＜marquee＞と違うのはテキストだけじゃなく、画像も点滅させれることですかね。
と言っても画像はあんまり点滅させる機械はないかもしれませんが・・・。

まとめ

透明度が切り替わるアニメーションなので速度の調節次第では、フワッと出てくるのでそこまで目障りじゃない程度に点滅させれるかなと思います。僕的にはコレはコレでありかと思います。
まぁ、今どきあんまり実装する機会はないかと思いますが、ポップなデザインのWEBサイトの新着トピックの「NEW!!」マークとかに使うのはいいかもしれませんね。なんやかんやでこういう動きを喜ぶクライアントさんもいるかもですし、以上、＠Kc_fujiでした。