Fade in chars in css with an loop

user_12799858 0
Viewed 42

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.

css html
1 Answers

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>

user_103471450
Related