A CSS+Jquery Animation Workout

A personal exercise adapted from A PEN BY Loktar

See the Pen CSS animated waves by Loktar (@loktar00) on CodePen.



My Version on GitHub

html Code

<div id="ocean"></div>

css Code

/*color, position, internal time*/
#ocean { z-index: 100;}
.wave {position: absolute;bottom: 0;background: #7ecef4;opacity: 0.5;display: inline-block;height: 35%;width: 10px;position: absolute;z-index: 5 !important;-webkit-animation-name: dostuff;-webkit-animation-duration: 2.74159s;-webkit-animation-iteration-count: infinite;-webkit-transition-timing-function: ease-in-out;}
.wave_middle {position: absolute;bottom: 0;background: #0068b7;opacity: 0.3;display: inline-block;height: 27%;width: 10px;position: absolute;z-index: 5 !important;-webkit-animation-name: dostuff_mid;-webkit-animation-duration: 3.42s;-webkit-animation-iteration-count: infinite;-webkit-transition-timing-function: ease-in-out;}
.wave_bottom {position: absolute;bottom: 0;background: #002e73;opacity: 0.8;display: inline-block;height: 17%;width: 10px;position: absolute;z-index: 5 !important;-webkit-animation-name: dostuff_bot;-webkit-animation-duration: 2.54s;-webkit-animation-iteration-count: infinite;-webkit-transition-timing-function: ease-in-out;}
.wave_light {position: absolute;bottom: 10%;background: #fff;opacity: 0.3;display: inline-block;height: 32%;width: 10px;position: absolute;z-index: 5 !important;-webkit-animation-name: dostuff_light;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;-webkit-transition-timing-function: ease-in-out;}

/* amplitude animation*/
@-webkit-keyframes dostuff {0% {height: 35%;}50% {height: 48%;}100% {height: 35%;}}
@-webkit-keyframes dostuff_mid {0% {height: 27%;}50% {height: 36%;}100% {height: 27%;}}
@-webkit-keyframes dostuff_bot {0% {height: 17%;}50% {height: 23%;}100% {height: 17%;}}
@-webkit-keyframes dostuff_light {0% {height: 1%;bottom: 31%;}50% {height: 4%;bottom: 35%;}100% {height: 1%;bottom: 31%;}}

js Code (jquery included)

$(document).ready(function(){
 
// 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";

   var wave_middle = document.createElement("div");
   wave_middle.className += " wave_middle";
   docFrag.appendChild(wave_middle);
   wave_middle.style.left = i * waveWidth + "px";
   wave_middle.style.webkitAnimationDelay = (i/91) + "s";

   var wave_bottom = document.createElement("div");
   wave_bottom.className += " wave_bottom";
   docFrag.appendChild(wave_bottom);
   wave_bottom.style.left = i * waveWidth + "px";
   wave_bottom.style.webkitAnimationDelay = (i/97) + "s";

   var wave_light = document.createElement("div");
   wave_light.className += " wave_light";
   docFrag.appendChild(wave_light);
   wave_light.style.left = i * waveWidth + "px";
   wave_light.style.webkitAnimationDelay = 0 + "s";

 }
 ocean.appendChild(docFrag);
});