CSS テキストを使ったアニメーション

テキストを使ったアニメーションを4つほど作りました。

実際の動作を下記URLで確認できます。
http://jsfiddle.net/junya_5102/dsqcwd0f/1/

その1

<p class="text-anime1">Hello World!</p>

.text-anime1{
  color: #fff;
  text-shadow:
    1px 0 1px #000,
    0 1px 1px #000;

  animation: text_animation1 2s ;
}

@keyframes text_animation1{
  0%{
    letter-spacing: -2em;
  }
  100%{
    letter-spacing: 0;
  }
}

その2

<p class="text-anime2">CSS Only</p>

.text-anime2{
  display: inline-block;
  animation: text_animation2 2s forwards;
}

@keyframes text_animation2{
  0%{
    color: #000;
    text-shadow: none;
  }

  25%{
    color: #fff;
    text-shadow:
      1px 0 0 #000,
      0 1px 0 #000;
  }

  50%{
    box-shadow: none;
  }

  100%{
    color: #008000;
    box-shadow: 0 -5px 0 0 #EE7E63 inset;
  }
}

その3 (これが一番使えそう)

<p class="text-anime3">Text Animations</p>

.text-anime3{
  color: #55BEFC;
  animation: text_animation3 3s;
}

@keyframes text_animation3{
  0%{
    letter-spacing: -0.5em;
    transform: translateY(-1000px);
  }

  50%{
    letter-spacing: -0.5em;
    transform: none;
  }

  100%{
    letter-spacing: 0;
  }
}

その1との違いはテキストが落ちてくるところです。

その4

動作確認用
http://jsfiddle.net/junya_5102/6kxgqdp6/

<p class="text-wrap">
  <span>T</span>
  <span>h</span>
  <span>a</span>
  <span>n</span>
  <span>k</span>
  <span>y</span>
  <span>o</span>
  <span>u</span>
</p>

.text-wrap span{
  display: inline-block;
  transform: translateY(-2000px);
  animation: text_animation4 0.5s linear forwards;
}

.text-wrap span:nth-child(1){
  animation-delay: 0.5s;
}

.text-wrap span:nth-child(2){
  animation-delay: 0.7s;
}

.text-wrap span:nth-child(3){
  animation-delay: 1.0s;
}

.text-wrap span:nth-child(4){
  animation-delay: 1.2s;
}

.text-wrap span:nth-child(5){
  animation-delay: 1.4s;
}

.text-wrap span:nth-child(6){
  animation-delay: 1.6s;
}

.text-wrap span:nth-child(7){
  animation-delay: 1.8s;
}

.text-wrap span:nth-child(8){
  animation-delay: 2.0s;
}

@keyframes text_animation4{
  from{
    transform: translateY(-2000px);
  }

  to{
    transform: translateY(0);
  }
}