Disappear text animation with html and css in 2022 by jishaansinghal with full source code

Disappear text animation with html and css in 2022 by jishaansinghal with full source code

Html:

   <div class="animation">

  <span>d</span> <span>i</span> <span>s</span> <span>a</span> <span>p</span> <span>p</span> <span>e</span> <span>a</span> <span>r</span>

</div>

Css:

body {

  height:100vh;

  font-family: 'Poppins', sans-serif;

  font-size:12vw;

  text-transform: uppercase;

  overflow: hidden;

}

.animation {

  position: absolute;

  left:0;

  right:0;

  margin: auto;

  width:100%;

  text-align: center;

  height:fit-content;

  bottom:0;

  top:0;

}

.animation span {

  font-weight: 900;

  display: inline-block;

  color:transparent;

  text-shadow: 0px 0px 0px black;

  animation-duration: 3s;

  animation-iteration-count: infinite;

}

.animation span:nth-child(1){

  animation-name: animationleft;

}

.animation span:nth-child(2){

  animation-name: animationleft;

  animation-delay: .3s;

}

.animation span:nth-child(3){

  animation-name: animationight;

  animation-delay: .6s;

}

.animation span:nth-child(4){

  animation-name: animationleft;

  animation-delay: .8s;

}

.animation span:nth-child(5){

  animation-name: animationight;

  animation-delay: 1s;

}

.animation span:nth-child(6){

  animation-name: animationight;

  animation-delay: 1.3s;

}

.animation span:nth-child(7){

  animation-name: animationleft;

  animation-delay: 1.6s;

}

.animation span:nth-child(8){

  animation-name: animationight;

  animation-delay: 2s;

}

.animation span:nth-child(9){

  animation-name: animationight;

  animation-delay: 2.3s;

}

@keyframes animationleft{

  50% {transform: skew(50deg) translateY(-200%);

      text-shadow: 0px 0px 50px;

        opacity: 0;

  }

}

@keyframes animationight{

  50% {transform: skew(-50deg) translateY(-200%);

      text-shadow: 0px 0px 50px;

        opacity: 0;

  }

}