así que quiero desvanecerme letra por letra usando solo 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>Investigué un poco y descubrí que esto no podía funcionar porque la demora estaría dentro de un bucle, por lo que la demora :nth-of-type(1) sería infinita. ¿Hay alguna manera de hacer que esto funcione sin hacer todos los enésimos tipos a mano? Sería genial hacer esto sin crear un lío de css.
Aquí tienes...
#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> 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>