Typewriter Effect

A classic typewriter animation that reveals text character by character with a blinking cursor. Adjust the steps() value to match your text length and the animation duration for speed.

.typewriter {
  overflow: hidden;
  border-right: 2px solid;
  white-space: nowrap;
  animation: typing 3s steps(30) forwards, blink 0.7s step-end infinite;
  width: 0;
}
@keyframes typing {
  to { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}