The problem
You want text to appear as if it is being typed out character by character.
The solution
.typewriter {
font-family: monospace;
overflow: hidden;
border-right: 3px solid #3a7bff;
white-space: nowrap;
width: 0;
animation:
typing 3.5s steps(30, end) forwards,
blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: #3a7bff; }
}
/* Multiple lines typing */
.typewriter-container {
display: inline-block;
}
.typewriter-line {
font-family: monospace;
overflow: hidden;
white-space: nowrap;
width: 0;
animation: typing 2s steps(30, end) forwards;
}
.typewriter-line:nth-child(2) {
animation-delay: 2s;
}
.typewriter-line:nth-child(3) {
animation-delay: 4s;
border-right: 3px solid #3a7bff;
animation:
typing 2s steps(30, end) 4s forwards,
blink-caret 0.75s step-end infinite;
}See it live
Put it to work
<h1 class="typewriter">
Welcome to my portfolio...
</h1>
<!-- Multiple lines -->
<div class="typewriter-container">
<p class="typewriter-line">Line one types first...</p>
<p class="typewriter-line">Then line two appears...</p>
<p class="typewriter-line">Finally, line three!</p>
</div>Worth knowing
Adjust steps() value to match character count. Works best with monospace fonts.