JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="wave-wrap">
    <div></div>
</div>

CSS

body {
    background: #fff;
    margin: 0;
}
.wave-wrap {
    min-height: 100px;
    position: relative;
    overflow: hidden;
}
.wave-wrap > div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 50px;
    background-image: url(http://i.imgur.com/CXtYWQe.png);
    background-repeat: repeat-x;
    background-position: bottom left;
    animation: waveAnim linear 2s infinite;
}
@keyframes waveAnim {
    0% {
        left: -100px;
        bottom: 0;
    }
    50% {
        left: -50px;
        bottom: -5px;
    }
    100% {
        left: 0;
        bottom: 0;
    }
}