<span class="animated-text tilted">
Getting Tilted
</span>
<span class="animated-text flip">
Flipping Out
</span>
<span class="animated-text wave">
Waving
</span>
<span class="animated-text pop">
Popping
</span>

@import url('https://fonts.googleapis.com/css?family=Baloo');
html{
  height:100%;
  width:100%;
  background:#353940;
  color:#f66;
}

body {
  height:100%;
  width:100%;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  overflow:hidden;
}

.animated-text {
  font: 3em/1.5 "Baloo";
}

.animated-text span.letter{
  display:inline-block;
}

.animated-text.wave span.letter{
  animation: 1s wave backwards ease-in-out infinite;
}

.animated-text.flip span.letter{
  animation: 1s flip forwards ease-in-out infinite;
}

.animated-text.pop span.letter{
  animation: 1s pop forwards ease-in-out infinite;
}

.animated-text.tilted span.letter{
  animation: 1s tilted forwards ease-in-out infinite;
}

@keyframes wave {
  0%{
    transform: translateY(0em);
  }
  50%{
    transform: translateY(-1rem);
  }
}

@keyframes flip {
  0%{
    transform: rotateX(0deg);
  }
  50%{
    transform: rotateX(90deg);
  }
  100%{
    transform: rotateX(0deg);
  }
}

@keyframes pop {
  0%{
    transform: rotateZ(5deg) scale(0.75) translateY(0);
    opacity:0.1;
  }
  50%{
    transform: rotateZ(-5deg) scale(1) translateY(-0.5em);
    opacity:1;
  }
  100%{
    transform: rotateZ(5deg) scale(0.75) translateY(0);
    opacity:0.1;
  }
}

@keyframes tilted {
  0%{
    transform: rotateZ(-15deg);
  }
  50%{
    transform: rotateZ(15deg);
  }
  100%{
    transform: rotateZ(-15deg);
  }
}

@keyframes shine {
  75%{
    color: inherit;
  }
  100%{
    color: #fff;
  }
}

@keyframes crazy {
  0%{
    transform: translateY(0) rotateX(90deg);
  }
  50%{
    transform: translateY(-1em) rotateX(0deg);
  }
  100%{
    transform: translateY(0) rotateX(-90deg);
  }
}

@keyframes newone {
  0%{
    font-size: 3rem;
  }
  50%{
    font-size: 3.5rem;
  }
  100%{
    font-size: 3rem;
  }
}

var animatedText = document.querySelectorAll(".animated-text");

function animate(element){
  var textArray = element.innerText.split("");
  element.firstChild.remove();
  
  var elArray = textArray.map(
    (letter,index)=>{
      if(letter==" ") letter = ' ';
      var el = document.createElement("span");
      el.className = "letter";
      el.innerHTML = letter;
      el.style.animationDelay = index/(textArray.length)+"s";
      element.appendChild(el);
      return el;
    }
  );
  element.innerHtml = elArray;
}

Array.from(animatedText).map(animate)