Заливающийся текст на CSS

При помощи анимации на CSS3 можно сделать фантастические эффекты. Один из таких эффектов это текст, который заливается водой. Его можно использовать на сайте, который связан с водной тематикой.

Этот вариант работает во всех современных браузерах.

ХТМЛ разметка:

<div class="loading wave">
  Заливающийся текст
</div>

<!-- Для Firefox -->
<div class="loading loading-2 wave wave-2">
  <div class="ff">Для браузером, которые не поддерживают background-clip:text:</div>
  <div class="loading-2-text"></div>
</div>

CSS оформление:

$background-color:#141414;
body{
 background:$background-color; 
  width:100%;
  height:100%;
}
.loading{
  text-transform:uppercase;
  font-weight:bold;
  font-size:50pt;
  text-align:center;
  height:120px;
  line-height:110px;
  vertical-align:bottom;
  position:absolute;
  left:0;
  right:0;
  top:100px;
  bottom:0;
  display:block;
}

.loading-2{
  top:300px;
  width:473px;
  height:97px;
  font-size:0;
  background:rgba(255,255,255,0.06);
  margin:0 auto;
}
.ff{
  position:absolute;
  font-size:12pt;
  top:-20px;
  color:white;
  line-height:12pt;
  
}
.loading-2-text{
  width:473px;
  height:97px;
  display:inline-block;
}
@keyframes wave-animation{
  0%{background-position:0 bottom};
  100%{background-position:200px bottom};
}
@keyframes loading-animation{
  0%{background-size:200px 0px};
  100%{background-size:200px 200px};
}
.wave{
   background-image:url('/blog/wp-content/uploads/2013/11/wave.png');
  @include background-clip(text);
  color:rgba(0,0,0,0);
text-shadow:0px 0px rgba(255,255,255,0.06);
  animation:wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate;
  background-size:200px 100px;
  background-repeat:repeat-x;
  opacity:1;
}
.wave-2{
  @include background-clip(initial);
  display:inline-block;
}

Отлично для такого примера подходят веб-шрифты, например Lobster