色々なパターンの点滅するCSSアニメーションサンプル集

2019-03-272023-02-22CSS アニメーション サンプル集,CSS

文字や要素を点滅するCSSアニメーションのパターン集です。

各点滅アニメーションのサンプルコードは@keyframes（キーフレーム）を使ったanimationを利用しています。

通常点滅パターン

シンプルなフラッシュパターンで、1秒間隔で点滅アニメーションさせています。

See the Pen CSS Flash animation 1 by yochans (@yochans) on CodePen.

<div class="box"></div>

.box {
	animation: flash 1s linear infinite;
	width: 50px;
	height: 50px;
	background: #0091EA;
	margin: 20px;
}

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

	50% {
		opacity: 0;
	}
}

開始（0％）と終了（100％）の透過度（opacity）を同じにする事でスムーズな点滅アニメーションを表現します。

animationプロパティについて

animationプロパティの「flash」はアニメーション名、「1s」はアニメーション時間、 「linear」はイージング、「infinite」は繰り返し設定を指定しています。

@keyframesについて

アニメーション名を指定した@keyframesを用意する事でanimationプロパティの設定に従って@keyframes内のアニメーションが実行されます。

サンプルの0％と100％の様に内容が同じ場合はカンマ区切りで一緒に指定可能です。

透過度（opacity）は0～1の範囲で0.1などの小数点を使って指定可能です。

高速点滅パターン

単純にCSSアニメーション時間を短くして高速点滅させています。

See the Pen CSS Flash animation 2 by yochans (@yochans) on CodePen.

<div class="box"></div>

.box {
	animation: flash 0.3s linear infinite;
	width: 50px;
	height: 50px;
	background: #0091EA;
	margin: 20px;
}

@keyframes flash {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

一度のアニメーション時間を0.3秒とする事で、高速点滅を表現しています。

シャープな点滅パターン

フラッシュするタイミングをシャープにした感じの点滅アニメーションパターンです。

See the Pen CSS Flash animation 3 by yochans (@yochans) on CodePen.

<div class="box"></div>

.box {
	animation: flash 1s linear infinite;
	width: 50px;
	height: 50px;
	background: #0091EA;
	margin: 20px;
}

@keyframes flash {

	0%,
	50%,
	100% {
		opacity: 0;
	}

	35% {
		opacity: 1;
		background: #7fff00;
	}

	65% {
		opacity: 1;
		background: #0091EA;
	}
}

0から100％の間で透過度を1に設定する範囲を狭くする事で、ふわっとした点滅にさせず、パシッっとしたシャープな点滅アニメーションを表現します。

交互に色を変えて点滅するパターン

交互に設定した2色を入れ替えて点滅させるCSSアニメーションパターンです。

See the Pen CSS Flash animation 3 by yochans (@yochans) on CodePen.

<div class="box"></div>

.box {
	animation: flash 1s linear infinite;
	width: 50px;
	height: 50px;
	background: #0091EA;
	margin: 20px;
}

@keyframes flash {

	0%,
	50%,
	100% {
		opacity: 0;
	}

	35% {
		opacity: 1;
		background: #7fff00;
	}

	65% {
		opacity: 1;
		background: #0091EA;
	}
}

複数の色に変えて点滅するパターン

透過度を利用した点滅CSSアニメーションと同時に、背景色を差し替えて点滅させる事で複数の色に変化させつつ点滅させるCSSアニメーションパターンです。

See the Pen CSS Flash animation 5 by yochans (@yochans) on CodePen.

<div class="box"></div>

.box {
	animation: flash 1s linear infinite;
	width: 50px;
	height: 50px;
	background: #0091EA;
	margin: 20px;
}

@keyframes flash {

	0%,
	35%,
	60%,
	100% {
		opacity: 0;
	}

	25% {
		opacity: 1;
		background: #7fff00;
	}

	50% {
		opacity: 1;
		background: #0091EA;
	}

	75% {
		opacity: 1;
		background: #ff1493;
	}
}

文字色を変えて点滅するパターン

複数の設定した色を入れ替えて点滅させるCSSアニメーションを文字に指定したパターンです。

See the Pen CSS Flash animation 6 by yochans (@yochans) on CodePen.

<p class="text">ONE NOTES</p>

.text {
	animation: flash 1s linear infinite;
	margin: 20px;
	font-size: 30px;
	font-weight: bold;
}

@keyframes flash {

	0%,
	35%,
	60%,
	100% {
		opacity: 0;
	}

	25% {
		opacity: 1;
		color: #7fff00;
	}

	50% {
		opacity: 1;
		color: #0091EA;
	}

	75% {
		opacity: 1;
		color: #ff1493;
	}

}

フォントや文字の大きさによっては見にくくなる場合があるので、アニメーション時間などを調節します。