Typewriter

CSS

/* Typewriter — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Recursive', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Recursive', sans-serif;
  font-weight: 400;
  letter-spacing: -1px;
  text-transform: none;
}

.text-effect {
  color: #f2f2f2;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid hsl(275 90% 62%);
  padding-right: 2px;
  animation:
    text-effect-type 1.17s steps(9, end) infinite,
    text-effect-caret 0.8s step-end infinite;
}

@keyframes text-effect-type {
  0% { clip-path: inset(0 100% 0 0); }
  70%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes text-effect-caret {
  0%, 100% { border-color: hsl(275 90% 62%); }
  50% { border-color: transparent; }
}

Related Entrance & Kinetic effects

• Fade In
• Letter Wave
• Stagger Reveal