JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<div id="inTurnFadingTextG">
  <div id="inTurnFadingTextG_1" class="inTurnFadingTextG">P</div>
  <div id="inTurnFadingTextG_2" class="inTurnFadingTextG">r</div>
  <div id="inTurnFadingTextG_3" class="inTurnFadingTextG">o</div>
  <div id="inTurnFadingTextG_4" class="inTurnFadingTextG">c</div>
  <div id="inTurnFadingTextG_5" class="inTurnFadingTextG">e</div>
  <div id="inTurnFadingTextG_6" class="inTurnFadingTextG">s</div>
  <div id="inTurnFadingTextG_7" class="inTurnFadingTextG">s</div>
  <div id="inTurnFadingTextG_8" class="inTurnFadingTextG">i</div>
  <div id="inTurnFadingTextG_9" class="inTurnFadingTextG">n</div>
  <div id="inTurnFadingTextG_10" class="inTurnFadingTextG">g</div>
  <div id="inTurnFadingTextG_11" class="inTurnFadingTextG"> </div>
</div>

CSS

#inTurnFadingTextG {
  width: 234px;
  margin: auto;
}

.inTurnFadingTextG {
  color: rgb(0, 0, 0);
  font-family: Arial;
  font-size: 24px;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  float: left;
  animation-name: bounce_inTurnFadingTextG;
  -o-animation-name: bounce_inTurnFadingTextG;
  -ms-animation-name: bounce_inTurnFadingTextG;
  -webkit-animation-name: bounce_inTurnFadingTextG;
  -moz-animation-name: bounce_inTurnFadingTextG;
  animation-duration: 1.82s;
  -o-animation-duration: 1.82s;
  -ms-animation-duration: 1.82s;
  -webkit-animation-duration: 1.82s;
  -moz-animation-duration: 1.82s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
}

#inTurnFadingTextG_1 {
  animation-delay: 0.65s;
  -o-animation-delay: 0.65s;
  -ms-animation-delay: 0.65s;
  -webkit-animation-delay: 0.65s;
  -moz-animation-delay: 0.65s;
}

#inTurnFadingTextG_2 {
  animation-delay: 0.78s;
  -o-animation-delay: 0.78s;
  -ms-animation-delay: 0.78s;
  -webkit-animation-delay: 0.78s;
  -moz-animation-delay: 0.78s;
}

#inTurnFadingTextG_3 {
  animation-delay: 0.91s;
  -o-animation-delay: 0.91s;
  -ms-animation-delay: 0.91s;
  -webkit-animation-delay: 0.91s;
  -moz-animation-delay: 0.91s;
}

#inTurnFadingTextG_4 {
  animation-delay: 1.04s;
  -o-animation-delay: 1.04s;
  -ms-animation-delay: 1.04s;
  -webkit-animation-delay: 1.04s;
  -moz-animation-delay: 1.04s;
}

#inTurnFadingTextG_5 {
  animation-delay: 1.17s;
  -o-animation-delay: 1.17s;
  -ms-animation-delay: 1.17s;
  -webkit-animation-delay: 1.17s;
  -moz-animation-delay: 1.17s;
}

#inTurnFadingTextG_6 {
  animation-delay: 1.3s;
  -o-animation-delay: 1.3s;
 ...