JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
    
</div>
<br />
<br />
<br />
<a class="one" href="#">200</a>
<a class="two" href="#">200</a>
<div id="bgp">[]</div>

CSS

#bg {
    background: transparent url(http://image.automotive.com/f/bikes/2007/9025456+pheader/146_0701_01_z+2007_united_motors_v2s_650s+red.jpg) no-repeat 0 0;
    width:200px;
    height:200px;
    
}

JavaScript

$("#bg").animate({
                backgroundPosition: '-100px',
                easing: 'easeOutCirc'          
            }, {
                duration: 500                    
            });

$("a.one").click(function(e){
    e.preventDefault();
    
    $("#bg").animate({backgroundPosition: '-=200px'});
}); 

$("a.two").click(function(e){
    e.preventDefault();
    $("#bg").animate({
                backgroundPosition: '-400px'        
            }, {
                duration: 500                    
            });

});