footer {
    background: rgb(31,36,160);
    background: linear-gradient(0deg, rgb(31 36 160 / 30%) 17%, rgba(31,36,160,0) 58%);
}
.footerwave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url('../lib/Images/wave.png');
    background-size: 5000px 100px;
}
    .footerwave#footerwave1 {
        z-index: 1000;
        opacity: 1;
        bottom: 0;
        animation: animatefooterwaves 4s linear infinite;
    }
    .footerwave#footerwave2 {
        z-index: 999;
        opacity: 0.5;
        bottom: 10px;
        animation: animate 4s linear infinite !important;
    }
    .footerwave#footerwave3 {
        z-index: 1000;
        opacity: 0.2;
        bottom: 15px;
        animation: animatefooterwaves 3s linear infinite;
    }

    .footerwave#footerwave4 {
        z-index: 999;
        opacity: 0.7;
        bottom: 20px;
        animation: animate 3s linear infinite;
    }

@keyframes animatefooterwaves {
    0% {
        background-position-x: 5000px;
    }

    100% {
        background-positon-x: 0px;
    }
}

@keyframes animate {
    0% {
        background-position-x: -5000px;
    }

    100% {
        background-positon-x: 0px;
    }
}