CSS3 animated waves

by grant

HTML

<div id="ocean">

</div>

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: 10%;
  width:10px;
  position:absolute;
  -webkit-animation-name:             dostuff; 
  -webkit-animation-duration:         5s; 
  -webkit-animation-iteration-count:  infinite;
  -webkit-transition-timing-function: ease-in-out;
}


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

JavaScript

// make some waves.
var ocean = document.getElementById("ocean"),
    waveWidth = 5,
    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);