Typewriter Animation
Realistic typewriter text animation with cursor blinking
Code
.typewriter {
font-size: 24px;
font-family: monospace;
overflow: hidden;
border-right: 2px solid #000;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 0.15em;
animation: typing 3.5s steps(40, end), 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: black }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>p</span> "attr-name"</span>>class</span>="typewriter"</span>>CSS Typewriter Animation</"attr-name"</span>>class</span>="tag"</span>>p</span>>