CSSで波打つ文字

実際に確認したい人はこちらへ
https://jsfiddle.net/junya_5102/Ly87fxnj/

---

HTML

<div class="text">
  <span>C</span>
  <span>S</span>
  <span>S</span>
  <span>!</span>
</div>

CSS

.text{
  /* アニメーションの領域確保 */
  margin-top: 0.8em;
}

.text span{
  display: inline-block;
  animation: wave-text 1s ease-in-out infinite;
}

/* アニメーション開始タイミングをずらす */
.text span:nth-of-type(1){ animation-delay: 0.0s; }
.text span:nth-of-type(2){ animation-delay: 0.1s; }
.text span:nth-of-type(3){ animation-delay: 0.2s; }
.text span:nth-of-type(4){ animation-delay: 0.3s; }

@keyframes wave-text{
  00%{
    transform: translateY(0em);
  }
  60%{
    transform: translateY(-0.8em);
  }
  100%{
    transform: translateY(0em);
  }
}