テキストを1文字ずつ表示させるCSSアニメーション

今回はテキストを1文字ずつ表示させるCSSアニメーションを紹介していきたいと思います。

テキストを1文字ずつ表示させるアニメーション

タイピングのように表示

1つ目はタイピングで打ち込んでいるような表示の仕方をCSSアニメーションで表現した方法です。

html

<div class="anime-box">
  <p class="TextAnime">アニメーションで表示するテキスト</p>
</div>

css

.anime-box .TextAnime{
	border-right: 0.05em solid black;
	overflow: hidden;
	white-space: nowrap;
	animation: txtanime 3s steps(16, end) forwards;
}

@keyframes txtanime{
  0% { width: 0%; }
  100% { width: 16em;}
}

1文字ずつフェードインしていくアニメーション

2つ目は1文字ずつフェードインしていくようなアニメーションになります。

cssの記述が多くなってしまいますがjavascriptを使わない方法になります。

html

<div class="anime-box">
	<div class="OneTextAnime">
		<span>T</span>
		<span>E</span>
		<span>X</span>
		<span>T</span>
		<span>A</span>
		<span>N</span>
		<span>I</span>
		<span>M</span>
		<span>A</span>
		<span>T</span>
		<span>I</span>
		<span>O</span>
		<span>N</span>
	</div>
</div>

css

.anime-box .OneTextAnime{
	display: flex;
	overflow: hidden;
}

.anime-box .OneTextAnime span{
	opacity: 0;
	animation: onetxtanime 2s forwards;
}

.anime-box .OneTextAnime span:nth-child(1){animation-delay: 0.5s}
.anime-box .OneTextAnime span:nth-child(2){animation-delay: 1.0s}
.anime-box .OneTextAnime span:nth-child(3){animation-delay: 1.5s}
.anime-box .OneTextAnime span:nth-child(4){animation-delay: 2.0s}
.anime-box .OneTextAnime span:nth-child(5){animation-delay: 2.5s}
.anime-box .OneTextAnime span:nth-child(6){animation-delay: 3.0s}
.anime-box .OneTextAnime span:nth-child(7){animation-delay: 3.5s}
.anime-box .OneTextAnime span:nth-child(8){animation-delay: 4.0s}
.anime-box .OneTextAnime span:nth-child(9){animation-delay: 4.5s}
.anime-box .OneTextAnime span:nth-child(10){animation-delay: 5.0s}
.anime-box .OneTextAnime span:nth-child(11){animation-delay: 5.5s}
.anime-box .OneTextAnime span:nth-child(12){animation-delay: 6.0s}
.anime-box .OneTextAnime span:nth-child(13){animation-delay: 6.5s}


@keyframes onetxtanime{
	from { opacity: 0 }
	to { opacity: 1 }
}

13文字あるのでdelayを13個分記述しています。

javascriptを使えばcssの記述はもう少し少なくできると思います。

今回はjavascriptを一切使わない方法でやってみました。