div.wave-container {
    position: relative;
    height: 100%;
}

.wave {
    background: rgb(0 0 255);
    border-radius: 1000% 1000% 0 0;
    position: absolute;
    width: 200%;
    height: 6em;
    animation: wave 3s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.4;
    bottom: 0;
    z-index: 20;
}

.wave:nth-of-type(2) {
    animation: wave 4.5s linear reverse infinite;
    opacity: 0.5;
}

.wave:nth-of-type(3) {
    animation: wave 11s -1s reverse infinite;
    opacity: 1;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}