Basic logic for animation

• We will set the width of text container to zero initially.
• Then after the content load we will kick-start the logic to increase the text containers width by One character per interval.

We will be applying the animation on text container using .text-typing-demo css class.

1. we will get the length of the string or number of characters in string (use .length property of string)
2. set the width equal to length of text with unit ch
3. create an animation def using keyframe with name typing, with width set to 0
4. on text-typing-demo set overflow to hidden and add animation property
5. important thing to note on animation property is that steps timing function. This will repeat the width by amount which is equal to length of one character. Hence, It's important to get the correct length of the text in the beginning.

<div class="text-wrapper">
  <div class="text-typing-demo">It's weird not to be weird. - John Lennon</div>
</div>

.text-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-typing-demo {
  width: 41ch;
  animation:
    typing 2s steps(41),
    blink 0.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 blink {
  50% {
    border-color: transparent;
  }
}

Preview

See the Pen Create cool typing animation by Abhishek (@just-b-weird) on CodePen.

That's all for this code-block, if you liked the article please do share with your peers and keep an eye for future updates! See you on other articles 😊