Animation - water flowing from tap - CSS3 or jQuery or GIF

Question

I want to develop this animation as shown in the image below, where this pump is an static image and I want the water to flow out of this as shown in the drops and in the direction shown, upon a click of other element. Whether this can be achieved through css3 Or jquery Or would I need a gif for this. Would appreciate any pointers on how to do this?

Answer 1

in my opinion jQuery is better option. create 2 or 3 set of images of water drops and use that image in setInterval() to rotate through those images to get the water drop effect.

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);

Check this Fiddle