JSFiddle - React, Tailwind, and code Playground

by Aakash Tiwari

HTML

<body>
  <p>
    <span>A</span>
    <span>A</span>
    <span>K</span>
    <span>A</span>
    <span>S</span>
    <span>H</span>
    <span>T</span>
    <span>I</span>
    <span>W</span>
    <span>A</span>
    <span>R</span>
    <span>I</span>
  </p>
 </body>

SCSS

body{
  position: relative;
  animation: changecolor 20s linear 2s infinite alternate;
  }
 span {
   display: inline-block;
 }
span:nth-child(4n){
  color: #ff5a5a;
  animation: rotatename 5s linear 2s infinite alternate;
}
span:nth-child(4n+1){
  color: #0095c2;
  animation: anti-rotatename 5s linear 2s infinite alternate, move 5s linear 2s infinite alternate;
  transform-style: preserve-3d;
}
span:nth-child(4n+2){
  color: #fd9e81;
  animation: rotatename 5s linear 2s infinite alternate;
  transform-style: preserve-3d;
}
span:nth-child(4n+3){
  color: #95c200;
  animation: anti-rotatename 5s linear 2s infinite alternate, move 5s linear 2s infinite alternate;
  transform-style: preserve-3d;
}
p{
  posititon: absolute;
  margin-top: 300px;
  margin-left: 100px;
  animation: anti-rotatename 10s linear 2s infinite alternate;
  transform-style: preserve-3d;
}
@keyframes anti-rotatename {
  0% { transform: rotate(0);}
  100%   { transform: rotate(360deg); }
}
@keyframes rotatename {
  0% { transform: rotate(0);}
  100%   { transform: rotate(-360deg); }
}
@keyframes move {
  30%{transform: translate3d(20px, 20px, 0px);}
  60%{transform: translate3d(-20px, 120px, 100px);}
}
@keyframes changecolor{
  10%{ background:#f6546a;}
  20%{ background:#9692b2;}
  30%{ background:#c6e2ff;}
  40%{ background:#c8a2c8;}
  50%{ background:#fff68f;}
  60%{ background:#fd9e81;}
  70%{ background:#ffa64c;}
  80%{ background:#507972;}
  90%{ background:#48616c;}
  100%{ background:#f6546a;}
}