How To Create A Typing Effect For Text With CSS

You might have seen some amazing animations where it seems like a text is being typed out as you enter a website and now you want to create the same effect, but don’t know how. Well, let’s find out how to create a typing effect for text with CSS.

What does the typing effect look like

If the typing effect isn’t familiar to you here’s how what the end product will look like:

In our preview we have centered the content, though it’s not necessary unless you want to, lets’s dig into how to create this typing effect.

How to create a typing effect for text with CSS

The first part we need is the HTML. The HTML consists of two parts, the main div element that holds the typing effect and the typing effect div that creates the typing effect for the text.

<div class="typing">
    <div class="typing-effect">
Typing effect for text
    </div>
</div>

The second part is the actual CSS that styles and animates our text. The important part is the “.typing-effect” and the “keyframes” that create the actual animation.

.typing {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.typing-effect {
  width: 22ch;
  animation: typing 2s steps(22), effect .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0;
  }
}
    
@keyframes effect {
  50% {
    border-color: transparent;
  }
}

… and that’s it. You now have a text that has the “typing“-effect. You can use the typing effect anywhere on your site if you add the CSS to your site’s style.css.