Animated typewriter effect that types and deletes text in a loop. Perfect for dynamic headlines, rotating messages, or interactive storytelling.
<div class="typewriter">Hello World!</div>.typewriter {
font-size: 2rem;
font-weight: 700;
color: #667eea;
font-family: 'Courier New', monospace;
border-right: 3px solid #667eea;
white-space: nowrap;
overflow: hidden;
animation: typing 3s steps(12) infinite, blink 0.75s step-end infinite;
}
@keyframes typing {
0%, 90%, 100% {
width: 0;
}
30%, 60% {
width: 100%;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}