以前、jQueryを使ったタイピングアニメーションをご紹介しましたが
今回はCSSだけでタイピング風アニメーションを実装します！
【jQuery】t.jsでタイピングアニメーションを実装してみよう

複雑なことはできませんが、軽く見せるくらいならCSSだけでOK！

デモページ

早速、実装していきましょう！

HTML

<p class="typing-animation">CCV BLOG...Sample Txt...</p>

CSS

.typing-animation {
	width: 20ch;	/*文字の長さ*/
	border-right: 5px solid #000;	/*点滅バー*/
	overflow: hidden;	/*必須*/
	white-space: nowrap;	/*必須*/
	color:#00aec9;
	font-size:4.0rem;
	line-height:1.4;
	font-weight:700;
	animation: typing 3s steps(18), blink .4s step-end infinite alternate;	/*アニメーション関連*/
}
@keyframes typing {
	from {
		width: 0;
	}
}
@keyframes blink {
	50% {
		border-color: transparent;		/*点滅風に見せる*/
	}
}

複数行はできませんが、とってもカンタンに実装できちゃいました！