Looking to achieve a typewriter animation effect on multiple strings? While most developers use JavaScript for this, I managed to create it using CSS. However, I've only been successful with two strings so far. Whenever I attempt a third string, it ends up overlapping.
Here's the HTML code:
<h1>I am Kirill
<div id="stmt1">Acquisition strategist</div>
<div id="stmt2">Campaign executioner</div>
<div id="stmt3">Semi-technical marketing lead</div>
</h1>CSS code for the animation:
#stmt2 {
margin-top: -40px;
}
#stmt1 {
width: 25em;
white-space: nowrap;
overflow: hidden;
animation: frag1type 10s steps(50, end) 0s infinite;
}
@keyframes frag1type {
from { width: 0; opacity: 1; }
37% { width: 25em; opacity: 1; }
49% { width: 0; opacity: 1; }
100% { width: 0; opacity: 1; }
}
#stmt2 {
opacity: 0;
width: 25em;
white-space: nowrap;
overflow: hidden;
animation: frag2type 10s steps(50, end) 5s infinite;
}
@keyframes frag2type {
from { width: 0; opacity: 1; }
37% { width: 25em; opacity: 1; }
49% { width: 0; opacity: 1; }
100% { width: 0; opacity: 1; }
}
#stmt3 {
margin-top: -40px;
}
#stmt3 {
opacity: 0;
width: 25em;
white-space: nowrap;
overflow: hidden;
animation: frag3type 10s steps(50, end) 7s infinite;
}
@keyframes frag3type {
from { width: 0; opacity: 1; }
37% { width: 25em; opacity: 1; }
49% { width: 0; opacity: 1; }
100% { width: 0; opacity: 1; }
}