JavaScriptなどを使わず、CSSのみで実装するタイピングエフェクトです。この下側に「テキスト表示にタイピングエフェクトを付けるデモ」というテキストが、タイプライターを打ち込んでいるように表示されます。一瞬で終わってしまいますので、再度動きを確認するには、ページをリロードしてください。

ページをリロード

htmlソース

<div class="wrapper">
 <div class="typing-demo">
  テキスト表示にタイピングエフェクトを付けるデモ　　　　　
 </div>
</div>

CSSソース

.wrapper {
 height: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.typing-demo {
 width: 33ch;
 animation: typing 2s steps(30), blink .5s step-end infinite alternate;
 white-space: nowrap;
 overflow: hidden;
 border-right: 3px solid;
 font-family: monospace;
 font-size: 1.6em;
 color:#b33;
 letter-spacing:2px;
}
@keyframes typing {
 from {
  width: 0
 }
}
@keyframes blink {
 50% {
  border-color: transparent
 }
}