<section>
  <div class="wave"></div>
</section>

body {
  margin: 0;
  padding: 0;
}
section {
  width: 100%;
  height: 100vh;
  background: url("https://png.pngtree.com/thumb_back/fw800/back_pic/03/74/68/4957bc61710d9ff.jpg");
  background-size: cover;
  background-attachment: fixed;
}

section .wave {
  position: absolute;
  width: 100%;
  /*height from the svg file*/
  height: 140px;
  bottom: 0;
  left: 0;
  background: url("https://d3o3obo12bi5zc.cloudfront.net/assets/waves/sep-wave-orange-dark-66f81137568d9d7a50628d6929388109145e88daf66d0b47db4c4acc29cde6bb.svg");
  animation: waves 10s linear infinite;
}

section .wave:before {
  content:'';
  width: 100%;
  height: 140px;
  background: url("https://d3o3obo12bi5zc.cloudfront.net/assets/waves/sep-wave-orange-dark-66f81137568d9d7a50628d6929388109145e88daf66d0b47db4c4acc29cde6bb.svg");
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
  animation: waves-reverse 10s linear infinite;
}

section .wave:after {
  content:'';
  width: 100%;
  height: 140px;
  background: url("https://d3o3obo12bi5zc.cloudfront.net/assets/waves/sep-wave-orange-dark-66f81137568d9d7a50628d6929388109145e88daf66d0b47db4c4acc29cde6bb.svg");
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.6;
  animation-delay: -5s;
  animation: waves 20s linear infinite;
}


@keyframes waves {
  0% {
    background-position: 0;
  }
  100% {
    /* from width of the svg file */
    background-position: 1600px;
  }
}

@keyframes waves-reverse {
  0% {
    background-position: 1600px;
  }
  100% {
    background-position: 0;
  }
}