Type and Delete Loop: CSS Text Animation

Type and Delete Loop

Types the phrase, pauses, deletes it and starts again, forever. Uses the same ch-based width trick with an alternating animation, so no JavaScript is needed for the delete phase.

Also known as: typing loop, typewriter infinite, auto typing text.

Design. Build. Ship.

Color Font size 40px Dark background

HTML

<div class="txt-typewriter-loop">Design. Build. Ship.</div>

CSS

.txt-typewriter-loop {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--c);
  border-right: 0.08em solid var(--c);
  width: 0;
  /* 20 = number of characters in the text */
  animation: txt-typewriter-loop-type 2.4s steps(20) infinite alternate, txt-typewriter-loop-caret 0.8s step-end infinite;}
@keyframes txt-typewriter-loop-type {
  0%, 15%   { width: 0; }
  85%, 100% { width: 20ch; }
}
@keyframes txt-typewriter-loop-caret {
  50% { border-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .txt-typewriter-loop, .txt-typewriter-loop *, .txt-typewriter-loop::before, .txt-typewriter-loop::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Type and Delete Loop

HTML

CSS

Customizing this snippet

Similar text animations