JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div class="wave one"></div>
<div class="wave two"></div>

CSS

*{
    box-sizing:border-box
}

.wave{
    background:url(http://image.shutterstock.com/z/stock-vector-set-of-blue-ocean-waves-vector-logo-elements-sea-water-icons-253895854.jpg) no-repeat
}

.one,
.two{
    height:118px;
    width:590px;
    background-position:-150px -1020px;
    animation-name:wave-one;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.two{
    background-position:-350px -1020px;
    animation-name:wave-two;
}

@keyframes wave-one{
    0{
        background-position-x:-180px;
    }
    
    100%{
        background-position-x:-500px;
    }
}

@keyframes wave-two{
    0{
        background-position-x:-350px;
    }
    
    100%{
        background-position-x:-780px;
    }
}