Text Typing Animation effect using HTML & CSS | Without JavaScript

The text typing effect is one of the best animations using which we can make the texts to look letter-by-letter on the screen which seems like it is being typed as we watch. In this article, we will see how to implement the text typing animation / typewriter effect using HTML and CSS only. Blinking cursor is designed using "border-right" property and typing animation is performed by showing the characters to appear one after another. 

HTML

<div class="text-typing">
  <p>Welcome to codingflag&nbsp;</p>
</div>

CSS

body {
  margin:0px;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ddd;
}
.text-typing {
  padding:20px 30px;
  background:#f5f5f5;
  font-size:35px;
  font-family:monospace;
  border-radius:50px;
}
.text-typing p {
  margin:0px;
  white-space:nowrap;
  overflow:hidden;
  animation:typing 4s steps(22,end) forwards,
            blink 1s infinite;
}
@keyframes typing {
  0% { width:0% }
  100% { width:100% }
}
@keyframes blink {
  0%,100% {
    border-right:2px solid transparent;
  }
  50% {
    border-right:2px solid #222;
  }
}