Animation How to - Create wave animation

Question

We would like to know how to Create wave animation.

The code is 
revised from http://fiddle.jshell.net/loktar/M9Brh/show/light/

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#ocean {<!-- w  ww.  j  a  v  a 2s  .  c  o m-->
  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%;}
}
</style>
<script type='text/javascript'>
window.onload=function(){
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);
}
</script>
</head>
<body>
  <div id="ocean"></div>
</body>
</html>

The code above is rendered as follows: