ブログやホームページで本文とは違う何かのお知らせをしたいとき、文章の中で目立たせたい文字列があるときなど、通常では文字色を変えたり、文字の大きさを変えたり、文字の太さを変えたり、はたまた文字列の背景に色を付けたりといった装飾をしますよね？
そんなときにもっと目立つようにするのが「文字の点滅」をさせる方法です。左の「文字の点滅」のように一定時間で消えたり表示したりを繰り返す表現方法です。
この表現をするのにblinkタグを使うのが一般的ですが、対応していないブラウザが多いので思ったように表示できないことが多いんです。
これを解消するためにはCSS Animationという方法を用いて表現するのが簡単かつ便利です。
CSSへ次のコードを追加して
/****** 文字を点滅せさるアニメーション *******/
.blinktext{
-webkit-animation:blink 1.2s ease-in-out infinite alternate;
-moz-animation:blink 1.2s ease-in-out infinite alternate;
animation:blink 1.2s 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;}
}次のようにclass指定してやればいいのです。至って簡単！！例えば・・・
<span class="blinktext">ここに点滅させる文字列</span>とすれば一連の文字列の中で「ここ」というところだけを点滅させることもできますし、
<div class="blinktext">ここに点滅させる文字列</div><p class="blinktext">ここに点滅させる文字列</p>とすれば段落や場所として点滅させることができます。
※前半の３行にある「〇〇s」を変更することで速度の調整ができます
※opacity:の左の値（〇%）を変更することで完全に消えたり完全に表示しなかったりといった装飾もできます
文字の色や大きさを変えたいときは
このCSSの中に文字装飾の要素を入れることもできますが、fontタグを間に使って個別に装飾した方が汎用性が高いと思います。
例えば文字を赤にして２サイズ大きめの文字にするなら
<p class="blinktext"><font color="red" size="+2">ここに点滅させる文字列</font>と書けば大丈夫です。
CSSの中でいっぺんにやってしまうと全部同じ装飾になってしまうので、この使い方の方が現実的だと思いますよ。
余談ですが、classとidの違いをご存じですか？CSSで書くときはclassなら「.」idなら「#」と記述し、本文では「class=””」「id=””」というのをタグに加えますよね？同じようにCSSを適用させることができますが、idは１ページに１か所しか適用できないので今回のように複数使う可能性のあることにはclass属性を使うといいでしょう。
参考にさせていただいたサイト：CSSでテキスト、画像、何でも点滅！
