Learn with us how to create Typing Effect in CSS!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim Have you tried this one yet? Maybe share it with someone who could use it 😎 #css #coding #programming ♬ original sound - Creative Tim
1. HTML Code
<div class="wrapper">
<div class="typing-demo">
Creative Tim: This is a typing demo.
</div>
</div>
2. CSS Code
.wrapper {
height: 100vh;
/*This part is important for centering*/
display: grid;
place-items: center;
}
.typing-demo {
width: 36ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
body {
background-color: #AFCBFF;
}
@keyframes typing {
from {
width: 0
}
}
@keyframes blink {
50% {
border-color: transparent
}
}
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
