Tttypingtextgif

CSS Typing Animation: Code, Variations and When to Use a GIF

A pure CSS typewriter effect with a blinking cursor, a multi-word version in JavaScript, and the places where code cannot run and a GIF can. · Updated November 10, 2026

The typing animation, text that writes itself out behind a blinking cursor, can be done in pure CSS for a single line, and needs a few lines of JavaScript for rotating words. Below are both, the gotchas, and the places where neither will run.

Pure CSS: one line

.typing {
  width: 22ch;              /* number of characters in the line */
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;  /* the cursor */
  font-family: monospace;
  animation:
    typing 2.5s steps(22),
    blink 0.6s step-end infinite alternate;
}
@keyframes typing { from { width: 0 } }
@keyframes blink { 50% { border-color: transparent } }

How it works: the element starts with zero width and grows to the full line, and steps(22) makes it grow one character at a time instead of smoothly. The right border is the cursor, and a second animation blinks it.

  • Use a monospace font, or the steps will not line up with letters, because ch is the width of a “0”.
  • Set the width and steps to the number of characters. Change the text and you must change both.
  • One line only. The trick relies on white-space: nowrap; it cannot wrap onto a second line.

JavaScript: rotating words with backspace

const words = ["websites.", "mobile apps.", "online stores."];
const el = document.querySelector(".typed");
let w = 0, n = 0, deleting = false;
function tick() {
  const word = words[w % words.length];
  n += deleting ? -1 : 1;
  el.textContent = word.slice(0, n);
  let delay = deleting ? 45 : 90;
  if (!deleting && n === word.length) { deleting = true; delay = 1600; }
  else if (deleting && n === 0) { deleting = false; w++; delay = 300; }
  setTimeout(tick, delay);
}
tick();

Put <span class="typed"></span> after your fixed text and style a cursor with a pseudo-element. Libraries such as Typed.js and TypeIt add options like pausing on punctuation and human-like speed variation, if you need them.

Accessibility

Screen readers may read a half-typed word, or nothing, depending on timing. Put the full sentence in an aria-label on the container and hide the animated span with aria-hidden="true". Respect prefers-reduced-motion by showing the final text without animating.

Where code cannot run

CSS and JavaScript animations do not work in emails, in GitHub READMEs, in most website builders’ headline blocks, in Notion, or in slides. In all of those, the same effect works as an image. The typing text GIF maker produces exactly this animation, fixed text plus rotating words with backspace and a blinking cursor, as a GIF or animated PNG you can drop in anywhere.

More from the blog