A CodePen by Jason Brown. CSS animated waves - messing around with making waves using css3 rather than JS. Its a bit different than you might expect. Pieces of the sky are actually moving.

index.html

<div id="ocean">

</div>

script.js

// make some waves.
var ocean = document.getElementById("ocean"),
    waveWidth = 10,
    waveCount = Math.floor(window.innerWidth/waveWidth),
    docFrag = document.createDocumentFragment();

for(var i = 0; i < waveCount; i++){
  var wave = document.createElement("div");
  wave.className += " wave";
  docFrag.appendChild(wave);
  wave.style.left = i * waveWidth + "px";
  wave.style.webkitAnimationDelay = (i/100) + "s";
}

ocean.appendChild(docFrag);

style.css

body{
  height:auto;
  margin:0;
}

#ocean{
  position:absolute;
  width:100%;
  min-height:100%;
  background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0, rgb(0,50,150)),
  color-stop(0.50, rgb(0,150,255))
  );
}

.wave{
  background:#a8e3ff;
  display:inline-block;
  height:60%;
  width:10px;
  position:absolute;
  -webkit-animation-name:             dostuff; 
  -webkit-animation-duration:         3s; 
  -webkit-animation-iteration-count:  infinite;
  -webkit-transition-timing-function: ease-in-out;
}


@-webkit-keyframes dostuff{
  0%{
    height:60%;
  }
  50%{ 
    height:40%;
  }
  100%{ 
    height:60%;
  }
}