JSFiddle - React, Tailwind, and code Playground

HTML

<div id="waterDropBox">
    <span id="waterPump"></span>
    <span id="waterDrop"></span>
</div>

CSS

#waterDropBox
{
    position:absolute;
}

#waterPump
{
    position:absolute;
    background-image:url('http://s24.postimg.org/cdejjwoip/pump.png');
    background-repeat:no-repeat;
    width:106px;
    height:88px;
    display:inline-block;
}

#waterDrop
{
    position:absolute;
    background-repeat:no-repeat;
    width:85px;
    height:87px;
    display:inline-block;
    top:0;
    margin-top:10px;
    margin-left:106px;
}

JavaScript

var index = 0;

setInterval(function(){
    switch(index){
        case 0:
            $("#waterDrop").css("background-image","url('http://s24.postimg.org/fsfk2due9/image.png')");
            index = 1;
            break;
        case 1:
            $("#waterDrop").css("background-image","url('http://s24.postimg.org/v5lcqdeld/image.png')");
            index = 0;
            break;
    }
},200);