Credits to Clueless Expert. YouTube link down below.
To create a typing animation, there usually is JavaScript involved or a NPM package is installed. However, this simple (limited) solution, does the whole trick with pure HTML and CSS!
Step 1: HTML
<div class="header-text-animation"> <h4>The passionate Web Developer from Bonn</h4> </div>
Step 2: CSS
div.header-text-animation {
display: inline-block;
}
div.header-text-animation > h4 {
border-right: solid 2px;
width: 100%;
white-space: nowrap;
overflow: hidden;
animation:
typing 2s steps(40),
cursor .4s step-end infinite alternate;
}
@keyframes typing {
from {
width: 0
}
}
@keyframes cursor {
50% {
border-color: transparent;
}
}
Please note: The number of steps() needs to match the number of characters, including white spaces, of the animated text. 40 in my case.