<div class="ocean">
      <div class="wave"></div>
</div>
body {
  margin: 0;
  padding: 0;
  background-color: blue;
}
.ocean {
  overflow: hidden;
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
  height: 100vh;
}
.wave {
    background: url('https://aquaworldcruises.com/wp-content/themes/aqua-world-theme/images/wave.svg') repeat-x;
    position: absolute;
    bottom: 0px;
    width: 7680px;
    height: 198px;
    -webkit-animation: wave 7s cubic-bezier(.36,.45,.63,.53) infinite;
    animation: wave 7s cubic-bezier(.36,.45,.63,.53) infinite;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

@media screen and (max-width: 600px) {
    .wave {
        top:-75px;
        height: 75px
    }
}

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

    100% {
        margin-left: -1920px
    }
}

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

    100% {
        margin-left: -1920px
    }
}

@-webkit-keyframes swell {
    0%,100% {
        -webkit-transform: translate3d(0,-25px,0);
        transform: translate3d(0,-25px,0)
    }

    50% {
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }
}

@keyframes swell {
    0%,100% {
        -webkit-transform: translate3d(0,-25px,0);
        transform: translate3d(0,-25px,0)
    }

    50% {
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.