Typo and Backspace Typing Effect: CSS Text Animation

Typo and Backspace Typing Effect

Types a word wrong, a red spellcheck squiggle appears, the caret backspaces over the mistake and types it again correctly. Three clipped spans share one caret, all pure CSS.

Also known as: typing with mistakes css, typewriter backspace correction, realistic typing typo.

Color Font size 40px Dark background

HTML

<div class="txt-typo-backspace-typing" aria-label="Ship it today">
  <span class="txt-typo-backspace-typing-t" aria-hidden="true"><span class="txt-typo-backspace-typing-ok">Ship it t</span><span class="txt-typo-backspace-typing-typo">doay</span><span class="txt-typo-backspace-typing-fix">oday</span><span class="txt-typo-backspace-typing-caret"></span></span>
</div>

CSS

.txt-typo-backspace-typing {
  --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;
  width: calc(13ch + 0.2em);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--c);
  text-align: left;}
.txt-typo-backspace-typing-t {
  white-space: pre;
}
.txt-typo-backspace-typing-t > span {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 0;
  /* room for the squiggle under the letters */
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}
.txt-typo-backspace-typing-ok {
  animation: txt-typo-backspace-typing-ok 0.81s steps(9) 0.3s forwards;
}
.txt-typo-backspace-typing-typo {
  text-decoration: underline wavy transparent;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.18em;
  animation:
    txt-typo-backspace-typing-typo 1.81s linear 1.11s forwards,
    txt-typo-backspace-typing-squiggle 0.2s ease-out 1.9s forwards;
}
.txt-typo-backspace-typing-fix {
  animation: txt-typo-backspace-typing-fix 0.4s steps(4) 3.1s forwards;
}
.txt-typo-backspace-typing-t > .txt-typo-backspace-typing-caret {
  width: 0.08em;
  height: 1.1em;
  margin-top: 0.05em;
  padding: 0;
  margin-bottom: 0;
  background: currentColor;
  animation: txt-typo-backspace-typing-blink 1s step-end infinite;
}
@keyframes txt-typo-backspace-typing-ok {
  99.9%, to { width: 9ch; }
}
/* type 4 letters, wait, then backspace all 4 */
@keyframes txt-typo-backspace-typing-typo {
  0% { width: 0; animation-timing-function: steps(4); }
  19.89%, 82.32% { width: 4ch; animation-timing-function: steps(4); }
  99.9%, 100% { width: 0; }
}
@keyframes txt-typo-backspace-typing-squiggle {
  to { text-decoration-color: #ef4444; }
}
@keyframes txt-typo-backspace-typing-fix {
  99.9%, to { width: 4ch; }
}
@keyframes txt-typo-backspace-typing-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .txt-typo-backspace-typing, .txt-typo-backspace-typing *, .txt-typo-backspace-typing::before, .txt-typo-backspace-typing::after, .txt-typo-backspace-typing *::before, .txt-typo-backspace-typing *::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.

Typo and Backspace Typing Effect

HTML

CSS

Customizing this snippet

Similar text animations