今日のCSSアニメーション

最近は隙を見て Code Pen に投稿することが趣味のひとつとなっています。
今回はCSSアニメーションで謎の演出をつくってみました。
一応、水中の文字が浮かび上がってくる感じをイメージしていますが、あまりうまくいってません。

DEMO

See the Pen hello world. by kimmy (@kimmy) on CodePen.

HTML

<p id="txt">
  <span class="txt t1">H</span>
  <span class="txt t2">E</span>
  <span class="txt t3">L</span>
  <span class="txt t4">L</span>
  <span class="txt t5">O</span>
  <span class="txt t6">W</span>
  <span class="txt t7">O</span>
  <span class="txt t8">R</span>
  <span class="txt t9">L</span>
  <span class="txt t10">D</span>
  <span class="txt t11">.</span>
</p>

SCSS

html {
  height: 100%;
}

body {
  height: 100%;
  background: #619254;
  overflow: hidden;
}

#txt {
  position: absolute;
  top: 120%;
  width: 100%;
  font: 60px "AvenirNext-Heavy", "ヒラギノ角ゴ StdN W8", "Hiragino Kaku Gothic StdN" bold;
  text-align: center;
  animation: flow 10s ease 2s infinite normal;
  -webkit-text-stroke: 2.5px #fff;
}

.txt {
  display: inline-block;
  position: relative;
  text-shadow: 0 5px 5px rgba(0, 0, 0, .3);
}

.t1 {
  animation: soda 3s ease 0s infinite normal;
}

.t2 {
  animation: soda 2.5s ease .5s infinite normal;
}

.t3 {
  animation: soda 2s ease 1.5s infinite normal;
}

.t4 {
  animation: soda 2s ease 1s infinite normal;
}

.t5 {
  animation: soda 2s ease 1.5s infinite normal;
}

.t6 {
  margin-left: 10px;
  animation: soda 2s ease 1s infinite normal;
}

.t7 {
  animation: soda 2s ease 1s infinite normal;
}

.t8 {
  animation: soda 1.5s ease 2s infinite normal;
}

.t9 {
  animation: soda 2s ease .5s infinite normal;
}

.t10 {
  animation: soda 2.5s ease .5s infinite normal;
}

.t11 {
  animation: soda 2s ease 1s infinite normal;
}

@keyframes soda {
  0%   {
    top: -20px;
    left: 2px;
    transform: rotate(10deg);
  }
  50%  {
    top: 10px;
    left: -2px;
    transform: rotate(-10deg);
  }
  100% {
    top: -20px;
    left: 2px;
    transform: rotate(10deg);
  }
}

@keyframes flow {
  0%   {
    top: 120%;
  }
  100% {
    top: -120%;
  }
}