Typewriter Text Animation

Simulates typing effect for text. Perfect for hero sections, loading messages, or any text that needs to appear letter by letter.

CSS7/16/2025

#css#animations#text

CSS

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 50% { border-color: transparent; }
  51%, 100% { border-color: currentColor; }
}

.typewriter {
  overflow: hidden;
  border-right: 2px solid;
  white-space: nowrap;
  animation: 
    typewriter 3s steps(40, end),
    blink 1s step-end infinite;
}

...

Loading comments...