CSS-only Typewriter

Code

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #050910;
  color: #f2f6ff;
  font-family: "Courier New", Courier, monospace;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
}

.typewriter {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #38bdf8;
  width: 0;
  animation: typing var(--dur) steps(var(--chars)) var(--delay) forwards, blink 0.75s step-end
    var(--delay) infinite;
}

/* Hide cursor after typing */
.typewriter.typed {
  border-right-color: transparent;
  animation: typing var(--dur) steps(var(--chars)) var(--delay) forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: var(--final-width);
  }
}

@keyframes blink {
  50% {
    border-right-color: transparent;
  }
}

/* Line 1 — "Build bold motion." = 18 chars */
.line-1 {
  --chars: 18;
  --dur: 1.2s;
  --delay: 0s;
  --final-width: 18ch;
  color: #38bdf8;
}

/* Line 2 — "Design with rhythm." = 19 chars */
.line-2 {
  --chars: 19;
  --dur: 1.3s;
  --delay: 1.4s;
  --final-width: 19ch;
  color: #818cf8;
}

/* Line 3 — "Ship original work." = 19 chars */
.line-3 {
  --chars: 19;
  --dur: 1.3s;
  --delay: 2.9s;
  --final-width: 19ch;
  color: #f472b6;
}

@media (prefers-reduced-motion: reduce) {
  .typewriter {
    width: var(--final-width);
    animation: none;
    border-right-color: transparent;
  }
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS Typewriter</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main>
    <p class="typewriter line-1">Build bold motion.</p>
    <p class="typewriter line-2">Design with rhythm.</p>
    <p class="typewriter line-3">Ship original work.</p>
  </main>
</body>
</html>

A typewriter effect driven entirely by CSS steps() timing — zero JavaScript. The cursor blink is also CSS-only via a separate @keyframes on border-right.

How it works

The trick uses two animations running simultaneously on the text element:

typing — animates width from 0 to 100% using steps(N) where N = character count. overflow: hidden clips the text as it types.
blink — toggles border-right-color between the accent color and transparent for the cursor.

@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink  { 50% { border-right-color: transparent } }

Limitations

Works best with monospace fonts (character widths are equal)
The step count must match the character count exactly
Multi-line requires JS or separate elements per line

Variants

Add animation-iteration-count: infinite to loop
Chain multiple lines with animation-delay