Hotodogo | Snippets: Ocean Wave Animation

:root {
    --ocean-height: 125px;
    --swell-high: -5px;
    --swell-low: 5px;
}
*, *::before, *::after {
    outline: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.ocean-container {
    margin: 0;
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(255, 254, 234, 1) 0%, rgba(255, 254, 234, 1) 35%, #B7E8EB 100%);
}

.ocean {
    position: absolute;
    height: var(--ocean-height);
    width: 100%;
    bottom: 0;
    left: 0;
}

.wave {
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%2357BBC1' stop-opacity='.25' offset='0%25'/%3e%3cstop stop-color='%23015871' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z' transform='matrix(-1 0 0 1 1600 0)'/%3e%3c/svg%3e") repeat-x;
    position: absolute;
    min-width: 6400px;
    width: 400%;
    height: var(--ocean-height);
    bottom: var(--swell-high);
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
    bottom: calc(var(--swell-high) - 5px);
    animation: wave 9s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
}

.wave:nth-of-type(3) {
    bottom: calc(var(--swell-high) - 10px);
    animation: wave 12s cubic-bezier(0.36, 0.45, 0.63, 0.53) -1.125s infinite, swell 7s ease -2.25s infinite;
    opacity: 1;
}

@keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

@keyframes swell {

    0%,
    100% {
        transform: translate3d(0, var(--swell-high), 0);
    }

    50% {
        transform: translate3d(0, var(--swell-low), 0);
    }
}

CSS Before Head

HTML Head

CSS After Head

JS Before HTML Body

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

HTML Body

HTML Foot

JS After HTML Body