text animation

HTML

<style>
.concept-eight {
  background:TRANSPARANT center center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.concept-eight .word {
  display: flex;
  align-items: center;
  justify-items: center;
  width: 450px;
  height: 80%;
}
.concept-eight .word:hover .char:before {
  transition: 0.6s ease;
  color: rgba(255, 69, 176, 0.8);
  animation: falls 1s ease forwards;
}
.concept-eight .word:hover .char:nth-child(1):before {
  animation: falls 0.9s ease 0.2s forwards;
}
.concept-eight .word:hover .char:nth-child(2n+3):before {
  animation: falls 1s ease 0.3s forwards;
}
.concept-eight .char {
  flex: 1;
  position: relative;
}
.concept-eight .char:before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  color: GREEN;
  text-shadow: none;
}

@keyframes falls {
  0% {
    opacity: 0;
    top: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100px;
  }
}
</style>
  <div class="concept concept-eight">
    <h1 class="word">
      <div class="char" data-content="A">A</div>
      <div class="char" data-content="A">A</div>
      <div class="char" data-content="R">R</div>
      <div class="char" data-content="Y">Y</div>
      <div class="char" data-content="A">A</div>
      <div class="char" data-content="N">N</div>
      <div class="char" data-content="-">-</div>
      <div class="char" data-content="C">C</div>
      <div class="char" data-content="H">H</div>
      <div class="char" data-content="I">I</div>
      <div class="char" data-content="R">R</div>
      <div class="char" data-content="A">A</div>
      <div class="char" data-content="M">M</div>
    </h1>
  </div>
</div>

Result

A

A

R

Y

A

N

-

C

H

I

R

A

M