CSS

点滅する CSS

　文字や要素を点滅させてみます。ただし、点滅表示は閲覧者に不快感を与えることが多いため使い方には十分にご注意ください。単に強調させたり目立たせたいだけであれば別の方法を検討することを推奨します。

　CSSの animation と @keyframes を使って表現しています。

Sample 1

　まずは文字列を点滅させてみます。

Sample 1

Yugien

HTML source


<p class="sample1">Yugien</p>

CSS source


.sample1 {
	animation: blinking1 1s linear infinite;
	margin: 20px;
}

@keyframes blinking1 {
	0%,100% {
		opacity: 1;
	}
	
	50% {
		opacity: 0;
	}
}

　まずは、点滅させたい文字列を準備します。ここでは「Yugien」という文字列を点滅させています。


<p class="sample1">Yugien</p>

　ここでは p要素に class属性で「sample1」という名前を付けました。

　次に CSSの animationプロパティを設定します。

animation-name
　ここではアニメーションの名前を「blinking1」と付けました。
animation-duration
　アニメーションの１回分の長さを「1s（１秒）」に設定しました。
animation-timing-function
　アニメーションのタイミング・進行割合で「linear（等しい速度でアニメーションする）」を設定しました。
animation-iteration-count
　アニメーションの繰り返し回数で「infinite（無限に繰り返し）」を設定しました。

　これら４つの項目をまとめて「animationプロパティ」を使って指定しています。

　それと見やすくするために marginプロパティを使って周りに余白を作っています。

　次に @keyframesの設定を作ります。


@keyframes blinking1 {
	0% {
		opacity: 1;
	}
	
	50% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

　0%（アニメーションスタート時）で透明な状態から、50%（中間）で表示させ、100%（アニメーションの終了時）でまた透明な状態に戻るように設定しています。これを省略して、


@keyframes blinking1 {
	0%,100% {
		opacity: 1;
	}
	
	50% {
		opacity: 0;
	}
}

と記述しています。

　この @keyframesを書き換えると様々な点滅方法に変わります。

Sample 1

Yugien

Sample 2

Yugien

Sample 3

Yugien

Sample 4

Yugien

Sample 1 CSS source


@keyframes blinking1 {
	0%,100% { opacity: 1; }
	50% { opacity: 0; }
}

　Sample1 は上記のものです。見比べられるように置いています。

Sample 2 CSS source


@keyframes blinking2 {
	0%,100% { opacity: 0; }
	50% { opacity: 1; }
}

　Sample2 は Sample1 の透明になるタイミングを逆にしましたので、0%で表示されているものが、50%で透明になり、100%で再度表示されます。

Sample 3 CSS source


@keyframes blinking3 {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

　Sample3 は 0%（最初）で表示させたものを 100%（最後）で透明になるように設定していますので、段々と消えていく表現になっています。

Sample 4 CSS source


@keyframes blinking4 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

　Sample4 は Sample3 を逆にしましたので、0%では透明ですが、100%で表示されますので、段々と表示される表現になっています。

　%（パーセンテージ）を変えたりすることで様々な表現ができますので色々と遊べそうです。

Sample 5

　要素（オブジェクト）を点滅させてみます。基本的には Sample1 となんら変わりはありません。

Sample 5

HTML source


<div class="sample5"></div>

CSS source


.sample5 {
	animation: blinking5 1s linear infinite;
	width: 50px;
	height: 50px;
	background: #0022ff;
	margin: 20px;
}

@keyframes blinking5 {
	0%,100% {
		opacity: 1;
	}
	
	50% {
		opacity: 0;
	}
}

　まずは点滅させたい要素（オブジェクト）を用意します。


<div class="sample5"></div>

CSS source


.sample5 {
	width: 50px;
	height: 50px;
	background: #0022ff;
	margin: 20px;
}

　ここでは div要素を用意して、CSSで正方形を描きました。

　これに、Sample1 と同じ animation と @keyframes を設定しました。

Sample 6

　Sample5 の点滅のスピードを変更してみます。

Sample 5

Sample 6

Sample 7

Sample5 CSS source


.sample5 { animation: blinking5 1s linear infinite; }

　比較用に Sample5 をそのまま置いています。

Sample6 CSS source


.sample6 { animation: blinking5 0.5s linear infinite; }

　Sample5 のアニメーション時間を半分の「0.5s」に設定してみました。

Sample7 CSS source


.sample7 { animation: blinking5 2s linear infinite; }

　Sample5 のアニメーション時間を倍の「2s」に設定してみました。

Sample 8

　２色を交互に点滅させてみました。

Sample 8

HTML source


<div class="sample8"></div>

CSS source


.sample8 {
	animation: blinking8 2s linear infinite;
	width: 50px;
	height: 50px;
	margin: 20px;
}

@keyframes blinking8 {
	0%,100% {
		opacity: 1;
		background: #0022ff;
	}
	
	50% {
		opacity: 1;
		background: #009900;
	}
	
	25%,75% {
		opacity: 0;
	}
}

Sample 9

　３色で点滅させてみました。

Sample 9

HTML source


<div class="sample9"></div>

CSS source


.sample9 {
	animation: blinking9 3s linear infinite;
	width: 50px;
	height: 50px;
	margin: 20px;
}

@keyframes blinking9 {
	0%,100% {
		opacity: 1;
		background: #0022ff;
	}
	
	33% {
		opacity: 1;
		background: #009900;
	}
	
	66% {
		opacity: 1;
		background: #990000;
	}
	
	16%,50%,83% {
		opacity: 0;
	}
}

Sample 10

　３色の点滅を文字列に指定してみました。

Sample 10

Yugien

HTML source


<p class="sample10">Yugien</p>

CSS source


.sample10 {
	animation: blinking10 3s linear infinite;
	margin: 20px;
	font-size: 2em;
}

@keyframes blinking10 {
	0%,100% {
		opacity: 1;
		color: #0022ff;
	}
	
	33% {
		opacity: 1;
		color: #009900;
	}
	
	66% {
		opacity: 1;
		color: #990000;
	}
	
	16%,50%,83% {
		opacity: 0;
	}
}