<div class="ocean">
  <div class="boat"><img src="https://vignette1.wikia.nocookie.net/steven-universe/images/e/e4/Yellowtail%27s_Boat.png/revision/latest?cb=20161011005235"/></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
  <div class="wave"></div>
</div>

html, body { height: 100%; 
}

body{
  overflow:hidden;
}
.ocean{
  width:100%;
  height: 400px;
  left:0px;
  background-color:#CDB380;
  margin:0px;
  position:absolute;
}

.wave{
  position: absolute;
  width:300%;
  height: 200px;
  bottom:0px;
}



.wave:nth-of-type(1){
  background: url(http://walkerkinetics.com/development/water-light.png) repeat-x; 
  transform: translate(0,0px);
  animation: wave 25s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite;
  opacity: 1;
}
.wave:nth-of-type(2){
  background: url(http://walkerkinetics.com/development/water-dark.png) repeat-x; 
  transform: translate(0px,20px);
  animation: wave 30s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite;
  opacity: 1;
}

.wave:nth-of-type(3){
  background: url(http://walkerkinetics.com/development/water-light.png) repeat-x; 
  transform: translate(00px,40px);
  animation: wave 25s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite;
  z-index:4;
}

.wave:nth-of-type(4){
  background: url(http://walkerkinetics.com/development/water-dark.png) repeat-x; 
  transform: translate(0px,60px);
  animation: wave 20s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite;
  opacity: 1;
  z-index:4;
}


@keyframes wave {
  100% {
    margin-left: 0;
  }
  0% {
    margin-left: -1600px;
  }
}


.boat{
  width:300px;
  position: absolute;
  z-index:2;
  left:50%;
  top:50px;  
  animation: boat 3s  cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite;
  img{
    width:100%;
  }
}
@keyframes boat {
  0%,100% {
    transform: translate3d(0px,0px,0px) rotateZ(-2deg);
  }
  50% {    
    transform: translate3d(0px,10px,10px) rotateZ(5deg);
  }
}