CSSでテキストを踊らせる。

---

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

.text{
  font-size: 3em;
  color: white;
}

.text span{ 
  display: inline-block;
  animation: textAnim 1s linear infinite alternate;
}

@keyframes textAnim{
  from{
    transform-origin: left bottom;
    transform: rotate(-15deg);
  }
  to{
    transform-origin: right bottom;
    transform: rotate(+15deg);
  }
}

ポイントは アニメーションで transform-originを変化させること。
これによって、踊っているように見える。

span に display: inline-blockと指定している。
これは デフォルトのinlineだと transformが効かないため。