CSS Typing Animation Multiple Lines Typewriter Effect

Text animation always makes a site look awesome. Whether you implement hover effect or animate the text on page load. When we talk about some creative animation — In our mind Jquery and Javascript comes first but if we play with CSS, We can easily achieve similar effect what we can do with Js scripts.

Today, We are going to create multiple lines typing animation with the help of CSS only. We will apply the typewriter effect on multiple paraphs of text.

In our previous post, We did little experience with typing text animation with the blinking cursor but that’s work with a single line of paragraph text.

Now we will take a look at how we can apply a similar effect with multiple paragraph Text. We will use almost the same technique but little modification of CSS code.

Without wasting more of your time Let’s start how we can do it.

The Structure

We will keep things simple and easy. So let’s start with the markup and basic structure.  Our HTML structure will start with a div with a class name CSS-typing which holds the three paragraph of text.

<div class="css-typing">
  <p>
    Typed text 1
  </p>
  <p>
    Typed text 2 Longer
  </p>
  <p>
    Typed text 3
  </p>
</div>

The Styling

Now about applying to style and We will start with text to make it look good. Simply apply font family and font size. To add a blinking cusor, We did simply apply border-right with width and color.

Step 1:

We have two additional elements.  The willwhite-space: nowrap help us to prevent the text wrap to the next line.

As for isoverflow: hidden a concern, It will hide the text when it’s width less than what we will define for each paragraph while implementing nth-child in our next step.

.css-typing p {
  border-right: .15em solid orange;
  font-family: "Courier";
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}

Step 2:

The real magic will start here. We will apply animation to each line of text and we will use the nth-child property to apply different timer on each paragraph line.

The important thing to be noted here its width. You can set the width just according to length of your text.

.css-typing p:nth-child(1) {
  width: 7.3em;
  -webkit-animation: type 2s steps(40, end);
  animation: type 2s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
  width: 11.5em;
  opacity: 0;
  -webkit-animation: type2 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
  width: 7.3em;
  opacity: 0;
  -webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

Step 3:

Finally, We will create the animation with the help of @keyframes

@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}
@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}
@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}
@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}

That’s it.