<div class="wavetext"></div>
/*
 This is my very first SCSS experiment
*/
@import url(https://fonts.googleapis.com/css?family=Fredoka+One);

body { background-color : black; }

$offset : -90px;
$count : 40;
$duration : 0.3;


@keyframes wave {
  from { transform : translateY(0); color: white; }
  to   { transform : translateY( $offset ); }
}

.wavetext {
  margin-top : 10em;
  text-align : center;
}


.wavetext span {
  display: inline-block;
  font-family : "Fredoka One", sans-serif;
  font-size : 70px;
 
  animation-duration: #{$duration}s;
  animation-name: wave;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


@for $i from 0 to $count {
  .wavetext :nth-child( #{$count}n + #{$i} ) {
      animation-delay : 
        -#{($count - $i) * 2 * $duration / $count }s;


      color: rgba(100+$i * 20 % 155, 10, 100+ $i * 40 % 55, 1);
  }
}


View Compiled
var text = "I wanna Wowow!";

for(var i in text) { 
  if(text[i] === " ") {
    $(".wavetext").append( $("<span>").html("&nbsp;") ); 
  } else {  
    $(".wavetext").append( $("<span>").text(text[i]) ); 
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js