<div class="ocean">
    <div class="ocean-level">
        <div class="wave"></div>
        <div class="wave"></div>
    </div>
</div>

.ocean { 
    position:absolute;
    top:0;
    left:0;
    height: 100vh;
    width:100vw;    
    z-index:0;
    overflow:hidden;
}

.ocean-level {
    position:absolute;
    bottom:0;
    left:0;
    height:60vh;
    width:100%;
    background: #4e8cff;
    z-index:0;
    animation: ani_updown 20s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}

.wave {
    background: url(wave.svg) repeat-x; 
    position: absolute;
    top: -198px;
    width: 6000px;
    height: 500px;
    animation: ani_wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
    top: -175px;
    animation: ani_wave 10s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, ani_swell 10s ease -1.25s infinite;
    opacity: 1;
}

@keyframes ani_updown {
    0% {
        transform: translateY(0vh);
    }
    90% {
        transform: translateY(40vh);
    }
    100% {
        transform: translateY(0vh);
    }
}

@keyframes ani_wave {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -3000px;
    }
}

@keyframes ani_swell {
    0%, 100% {
        transform: translate3d(0,-25px,0);
    }
    50% {
        transform: translate3d(0,5px,0);
    }
}