テキストがウェーブするCSSアニメーションサンプル

2022-06-27CSS アニメーション サンプル集,CSS

CSSでテキストが一文字ずつ動いてウェーブするCSSアニメーションサンプルを紹介しています。

テキストがウェーブするCSSアニメーション

テキストがウェーブするアニメーションの動作サンプルとCSSサンプルコードです。

See the Pen CSS | SAKURA Animation by yochans (@yochans) on CodePen.

HTMLは<p>タグとテキストの文字毎に<span>タグを指定しています。

<p class="wave"><span>O</span><span>N</span><span>E</span><span> </span><span>N</span><span>O</span><span>T</span><span>E</span><span>S</span></p>

サンプルではアニメーション名に「wave-anim」を指定しています。

アニメーションではテキスト（文字毎）が上下に移動するようにしています。

疑似クラス「nth-child(n)」を使って、文字毎にアニメーションの開始時間をずらしています。

.wave {
	font-size: 35px;
	font-weight: bold;
}

.wave span {
	position: relative;
	animation: wave-anim 2s linear infinite;
}

/* animation */
@keyframes wave-anim {
	0% {
		top: 0;
	}
	30% {
		top: 6px;
	}
	70% {
		top: -6px;
	}
	100% {
		top: 0;
	}
}

/* animation-delay */
.wave span:nth-child(5n + 1) {
	animation-delay: 0.5s;
}

.wave span:nth-child(5n + 2) {
	animation-delay: 1s;
}

.wave span:nth-child(5n + 3) {
	animation-delay: 1.5s;
}

.wave span:nth-child(5n + 4) {
	animation-delay: 2s;
}