CSS Text Typing Animation Effect (Code Snippet)

<div class="typing-container">
  <p class="typing-text">This text will type itself out...</p>
</div>

.typing-container {
  display: inline-block;
  font-family: monospace;
  font-size: 1.5em;
  border-right: .15em solid orange; /* The cursor */
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: .15em;
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 450px } /* same width as text */
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

/* Basic page styling */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #222;
  color: #eee;
}

CSS Text Typing Animation Effect

Share Code Snippet