Today, through a short tutorial, we will learn how to make the text typing effext using CSS.

HTML part

<div class="zcodewriter">
<h1> Zcode - never stop learning </h1>
</div>

CSS part

body {
  background: #1e88e5;
  padding-top: 50px;
  display: flex;
  justify-content: center;
}

.zcodewriter h1 {
  color: #fff;
  overflow: hidden; 
  border-right: 3px solid #fff; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: 3px; 
  animation: 
    typing 3s steps(30, end),
    blink .3s step-end infinite;
}

/* The typing effect */

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
/* The typewriter cursor effect */

@keyframes blink {
  from, to { border-color: transparent }
  50% { border-color: #fff }
}