waves

waves.css

.bottom{
  bottom: -225px;
  animation: waves 999999999s cubic-bezier(0,.25,1,.75) infinite;
}

.middle{
  bottom: -125px;
  animation: bwaves 450000s  linear infinite;
}

.top{
  bottom: -25px;
  animation: waves 450000s cubic-bezier(.25,.25,.75,.75) infinite;
}

.water{
  background-image: url("http://dev.modernassemb.ly/smashingmagazine/waveimage/img/wave.png");
  width: 100%;
  height: 100%;
	background-repeat: repeat-x;
  position: absolute;
}

@keyframes waves {
	from { background-position: 0 0; }
	to { background-position: -99999999px 0; }
}

@keyframes bwaves {
	from { background-position: 0 0; }
	to { background-position: 99999999px 0; }
}