Fade in chars in css with an loop - html

Question

so i want to fade in letter by letter using only css.
:root {
--delay: 1;
}
#welcomemsg span {
visibility: hidden;
}
#welcomemsg span:nth-of-type(n+1) {
animation: type 0s ease-in var(--delay)s;
animation-fill-mode: forwards;
--delay: calc(var(--delay) + 1);
}
#keyframes type {
to {
visibility: unset;
}
}
<div id="welcomemsg">
<span>H</span><span>e</span><span>y</span><span>!</span>
</div>
I did some research and found out that this couldnt work bc the delay would be inside an loop so :nth-of-type(1) delay would be infinite. Is there an way to get this working without doing all nth-of-types by hand ? It would be so cool to do this without creating an css mess.

Answer 1

Here you go...
#welcomemsg {
color: red;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 20s steps(50, end);
}
#keyframes type {
from {
width: 0;
}
}
<div id="welcomemsg">
<span>H</span><span>e</span><span>y</span><span>!</span>
</div>
UPDATE
span {
font-size: 30px;
opacity: 0;
}
span:nth-child(1) {
animation: type 1s forwards 0s;
}
span:nth-child(2) {
animation: type 1s forwards 0.5s;
}
span:nth-child(3) {
animation: type 1s forwards 1s;
}
span:nth-child(4) {
animation: type 1s forwards 1.5s;
}
#keyframes type {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="welcomemsg">
<span>H</span><span>e</span><span>y</span><span>!</span>
</div>