CSS
CSS3

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

More than 1 year has passed since last update.

sample.gif


<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を変化させること。
これによって、踊っているように見える。

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