Sass Animated Waves

// Waves
@-moz-keyframes waves {
  0% {  left: 0 }
  100% {  left: -1400px }
}
@-webkit-keyframes waves {
  0% {  left: 0 }
  100% {  left: -1400px }
}
@keyframes waves {
  0% {  left: 0 }
  100% {  left: -1400px }
}
.waves {
	bottom: 0;
	height: 122px;
	left: 0;
  position: relative;
  width: 100%;
  z-index: 0;
  .wave {
		background-repeat: repeat-x;
		height: 122px;
	  position: absolute;
	  width: 7000px;
	}
	.wave-top {
		background-image: url('img/wave-top.png');
	          animation: waves 26s infinite linear;
	     -moz-animation: waves 26s infinite linear;
	  -webkit-animation: waves 26s infinite linear;
	}
	.wave-mid {
		background-image: url('img/wave-mid.png');
	          animation: waves 21s infinite linear;
	     -moz-animation: waves 21s infinite linear;
	  -webkit-animation: waves 21s infinite linear;
	}
	.wave-bot {
		background-image: url('img/wave-bot.png');
		        animation: waves 16s infinite linear;
	     -moz-animation: waves 16s infinite linear;
	  -webkit-animation: waves 16s infinite linear;
	}
}