Typewriter Effect

Text typed letter by letter using a @keyframes width animation with steps() timing.

Published June 20, 2026

Demo

Hello, World! 👋

Pure CSS only

// no JavaScript required

HTML
				
				<p class="typewriter">Hello, World!</p>

CSS
				
				.typewriter {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 2px solid var(--accent);
  animation:
    type 1.8s steps(13) forwards,
    cursor .7s step-end infinite;
}

@keyframes type   { to { width: 13ch; } }
@keyframes cursor { 50% { border-right-color: transparent; } }

			

How it works

The typewriter illusion works by animating width from 0 to the full text length (Nch, where N is the character count) combined with overflow: hidden and white-space: nowrap. The steps(N) timing function — where N matches the character count — advances the animation in discrete jumps instead of smoothly, making each character appear one at a time. A blinking border-right acts as the cursor.