CSS Live Preview Available

Typewriter Animation

Realistic typewriter text animation with cursor blinking

CSS3AnimationTypewriterKeyframesText

Code

.typewriter {
  font-size: 24px;
  font-family: monospace;
  overflow: hidden;
  border-right: 2px solid #000;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.15em;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}

HTML

<"attr-name"</span>>class</span>="tag"</span>>p</span> "attr-name"</span>>class</span>="typewriter"</span>>CSS Typewriter Animation</"attr-name"</span>>class</span>="tag"</span>>p</span>>

Live Preview