wave.css

body{
    margin: 0;
    padding: 0;
} 
section
{
    position: relative;
    width: 100%;
    height: auto;
    background: #089acf;
    overflow: hidden;
    background-size: 400% 400%;
    animation: gradient-bg 15s ease infinite;

}
 section .wave
 {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     background: url(wave.png);
     background-size: 1000px 100px;
     
 }

@keyframes gradient-bg
{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }

}


section .wave.water
{
   animation: animate 25s linear infinite;
   z-index:1000;
   opacity:1;
   animation-delay: 0s;
   bottom:0;
}

section .wave.water:nth-child(2)
{
   animation: animate2 15s linear infinite;
   z-index:999;
   opacity:0.5;
   animation-delay: -5s;
   bottom:10px;

}
section .wave.water:nth-child(3)
{
   animation: animate 30s cubic-bezier(.55, .5,.45,.5) infinite;
   z-index:998;
   opacity:0.2;
   animation-delay: -5s;
   bottom:15px;

}
section .wave.water:nth-child(4)
{
   animation: animate2 5s linear infinite;
   z-index:997;
   opacity:0.7;
   animation-delay: -5s;
   bottom:20px;

}





@keyframes animate
{
   0%{
       background-position-x: 0;
   }
   100%{
       background-position-x: 1000px;
   }
}
@keyframes animate2
{
   0%{
       background-position-x: 0;
   }
   100%{
       background-position-x: -1000px;
   }
}