Typing animation using CSS
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 }
}