Animating waves with CSS keyframes

waves-css-anim.scss

@import "compass/css3/animation";
@import "compass/css3/transform";

$waveWidth:998px;

@include keyframes(waves){
  0%{
    left:0;
  }
  100%{
    left:$waveWidth * -1;
  }
}


body{
  background:#e6e6e5;
  overflow:hidden;
}


.waves{
  position: fixed;
  bottom: 0;
  left: 0;
  width: $waveWidth * 5;
  z-index:0;
  opacity:0.75;
  .wave{
    position:absolute;
    width:100%;
    height:300px;
    background-image:url('../img/wave.png');
    background-repeat:repeat-x;
    &.bottom-wave{
      @include animation(waves 17s infinite linear);
      bottom:-90px;
    }
    &.middle-wave{
      @include animation(waves 22s infinite linear);
      bottom:100px;
      margin-left:$waveWidth * -0.3;
    }
    &.top-wave{
      @include animation(waves 27s infinite linear);
      bottom:300px;
      margin-left:$waveWidth * -0.6;
    }
  }
}

The markup:

<div class="waves">
        <div class="wave top-wave"></div>
        <div class="wave middle-wave"></div>
        <div class="wave bottom-wave"></div>
    </div>

The markup:

<div class="waves">
        <div class="wave top-wave"></div>
        <div class="wave middle-wave"></div>
        <div class="wave bottom-wave"></div>
    </div>