Realize dynamic wave effect with pure CSS

Pure CSS realizes the dynamic wave effect. The three pictures required are at the end of the article. The effect is as shown in the figure. The wave will move:

<div class="waveWrapper waveAnimation">
    <div class="waveWrapperInner bgTop">
      <div class="wave waveTop" style="background-image: url('assets/img/wave-top.png')"></div>
    </div>
    <div class="waveWrapperInner bgMiddle">
      <div class="wave waveMiddle" style="background-image: url('assets/img/wave-mid.png')"></div>
    </div>
    <div class="waveWrapperInner bgBottom">
      <div class="wave waveBottom" style="background-image: url('assets/img/wave-bot.png')"></div>
    </div>
</div>
<style>
@keyframes move_wave {
      
      
    0% {
      
      
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
      
      
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
      
      
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
      
      
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 50px;
}
.waveWrapperInner {
      
      
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    /*background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);*/
}
.bgTop {
      
      
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
      
      
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
      
      
    z-index: 5;
}
.wave {
      
      
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
      
      
    background-size: 50% 30px;
}
.waveAnimation .waveTop {
      
      
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
      
      
    background-size: 50% 40px;
}
.waveAnimation .waveMiddle {
      
      
    animation: move_wave 10s linear infinite;
}
.waveBottom {
      
      
    background-size: 50% 30px;
}
.waveAnimation .waveBottom {
      
      
    animation: move_wave 15s linear infinite;
}
</style>