Typewriter effect

CSS, Animation · May 24, 2021

Creates a typewriter effect animation.

  • Define two animations, typing to animate the characters and blink to animate the caret.
  • Use the ::after pseudo-element to add the caret to the container element.
  • Use JavaScript to set the text for the inner element and set the --characters variable containing the character count. This variable is used to animate the text.
  • Use white-space: nowrap and overflow: hidden to make content invisible as necessary.
Preview
<div class="typewriter-effect">
  <div class="text" id="typewriter-text"></div>
</div>
.typewriter-effect {
  display: flex;
  justify-content: center;
  font-family: monospace;
}

.typewriter-effect > .text {
  max-width: 0;
  animation: typing 3s steps(var(--characters)) infinite;
  white-space: nowrap;
  overflow: hidden;
}

.typewriter-effect::after {
  content: " |";
  animation: blink 1s infinite;
  animation-timing-function: step-end;
}

@keyframes typing {
  75%,
  100% {
    max-width: calc(var(--characters) * 1ch);
  }
}

@keyframes blink {
  0%,
  75%,
  100% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}
const typeWriter = document.getElementById('typewriter-text');
const text = 'Lorem ipsum dolor sit amet.';

typeWriter.innerHTML = text;
typeWriter.style.setProperty('--characters', text.length);

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this