html/css中的阶梯式文本

<div class="staggered-text">
  <span class="letter">H</span>
  <span class="letter">e</span>
  <span class="letter">l</span>
  <span class="letter">l</span>
  <span class="letter">o</span>
</div>

.staggered-text {
  overflow: hidden;
  white-space: nowrap;
}

.letter {
  display: inline-block;
  animation: staggered-text 0.5s ease-in-out forwards;
  opacity: 0;
}

@keyframes staggered-text {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}