Create an animated typing text effect (CSS & JS solutions)

In this tutorial I’ll show you two different techniques to create animated text that looks like it’s being typed in real time. First will be a simple pure CSS animated text solution and then a more elaborate solution using JavaScript.

CSS Solution

First thing we need to do is create the HTML markup containing the text that we want to animate. As this text wont wrap if the width is greater than the browser window it’s best to keep this relatively short:

<div id="type-css">
  <h1>Lorem ipsum dolor sit consectetur.</h1>
</div> Code language: HTML, XML (xml)

Next for the CSS, we’ll be animating the text along with a blinking cursor:

#type-css {
  position: absolute;
}
#type-css h1 {
  overflow: hidden;
  line-height: 1;
  white-space: nowrap;
  border-right: 3px solid #fff;
  animation: text 3.5s steps(35, end), cursor 1s step-end infinite;
}Code language: CSS (css)

Now for the keyframe animations referenced above:

@keyframes text {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes cursor {
  from, to { border-color: transparent; }
  50% { border-color: #fff; }
}Code language: CSS (css)

JavaScript Solution

While the CSS solution looks good JavaScript allows us to create an even more realistic typing effect. To start insert a <h1> or any other tag you want to use into the HTML, we’ll add the actual text in the JavaScript:

<h1 id="type-js"></h1> Code language: HTML, XML (xml)

The text animation will be handled by the typeText() function:

document.addEventListener("DOMContentLoaded", function () {
  let letter = 0;
  const text = "Lorem ipsum dolor sit consectetur.";
  function typeText() {
    if (letter < text.length) {
      document.getElementById("type-js").innerHTML += text.charAt(letter);
      letter++;
      let speed = Math.floor(Math.random() * 150) + 50;
      setTimeout(typeText, speed);
    }
  }
  typeText();
});Code language: JavaScript (javascript)

This function outputs each of letters, one at a time, at a random interval as humans don’t type a single consistent speed. All you need to do is replace the const text with the text you would like to animate.

As the JavaScript handles the text animation we only need the CSS animation for the blinking cursor. This is the same animation as was used in the CSS solution:

#type-js {  
  display: inline-block;
  line-height: 1;
  border-right: 3px solid #fff;  
  animation: cursor 1s step-end infinite;
}
@keyframes cursor {
  from, to { border-color: transparent; }
  50% { border-color: #fff; }
}Code language: CSS (css)

There are many different ways to achieve the animated typing text effect. Both the methods we have used here work well and are easy to implement. Hopefully you found this tutorial helpful and are able to add this effect to your next project.