<blink> 文字を点滅させる

<blink>タグの説明

<blink>は、文字を点滅させたい箇所に適用するタグです。現在は非推奨の要素であるため、後半にCSSでの代替手段を紹介します。

特定の文字列を一定間隔で点滅させる効果があり、目立たせたいキャッチフレーズや告知に使用されます。一時期、携帯サイトでよく見られる表現でしたが、パソコン用のサイトでは使用を控えることが推奨されていました。

文字を点滅させる効果をCSSで再現するには、animationプロパティを使います。かつて、text-decorationプロパティでの代用も検討されていたようですが、現在では廃案となっています。

<blink>に指定できる主な属性

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<blink>の使い方とサンプル

この要素は標準仕様から廃止されたため、対応していないブラウザでは無視されます。

<blink>文字を点滅させる</blink>

CSSの代替手段としてtext-decorationの利用が検討されていましたが、現在この方法は使えません。

<span style="text-decoration:blink;">文字を点滅させる</span>

CSSでBlinkを再現する方法

それでは、HTMLの<blink>と同じ効果をCSSで代替してみましょう。animationプロパティとキーフレームを使う方法です。まずは以下の内容を確認して下さい。

<div class="sample_box">
	<span class="blink">文字を点滅</span>
</div>

.blink {
	animation: blink 1s linear 0s infinite normal;
}
@keyframes blink {
	0% { opacity: 0; }
	29.9% { opacity: 0; }
	30% { opacity: 1; }
	100% { opacity: 1; }
}

上記の内容で何をやっているのかを理解できた方は、各プロパティの値を調整して好みの点滅を作成して下さい。animationは、CSSアニメーションに関する値をまとめて指定するショートハンド・プロパティです。それぞれの値は以下のように分解できます。

.blink {
	/* 任意のアニメーション名 */
	animation-name: blink;
	/* アニメーションする時間（1秒） */
	animation-duration: 1s;
	/* 時間の流れ方（一定） */
	animation-timing-function: linear;
	/* アニメ開始時間（0秒） */
	animation-delay: 0s;
	/* 繰り返す数（無限） */
	animation-iteration-count: infinite;
	/* アニメーションの方向（普通） */
	animation-direction: normal;
}
/* 点滅の仕方を設定 */
@keyframes blink {
	/* 文字を透明にしておく */
	0% { opacity: 0; }
	29.9% { opacity: 0; }
	/* 文字を不透明にするタイミング */
	30% { opacity: 1; }
	100% { opacity: 1; }
}

animation-nameで指定した名前を@keyframesと関連付けます。この機能を理解すれば、様々なパターンの点滅を作り出すことができます。以下の例を参考に、別の組み合わせを試してみましょう。

.blink1 {
	animation: blink 2s linear 0s infinite normal;
}
.blink2 {
	animation: blink .5s linear 0s infinite normal;
}
@keyframes blink {
	0% { opacity: 0; }
	29.9% { opacity: 0; }
	30% { opacity: 1; }
	100% { opacity: 1; }
}
.blink3 {
	animation: blink_slow 1s linear 0s infinite normal;
}
@keyframes blink_slow {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.blink4 {
	animation: blink_color 1s linear 0s infinite normal;
}
@keyframes blink_color {
	0% { color: #c00; }
	29.9% { color: #c00; }
	30% { color: #00c; }
	100% { color: #00c; }
}
.blink5 {
	animation: blink_bgc 1s linear 0s infinite normal;
}
@keyframes blink_bgc {
	0% { background: #fcc; }
	29.9% { background: #fcc; }
	30% { background: transparent; }
	100% { background: transparent; }
}