JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg"></div>
<div id="play" class="action">animate</div>
<div id="reset" class="action">reset</div>

CSS

#bg {
    height:220px;
    width:220px;
    background:#333333 url(/img/logo.png) no-repeat;
    background-position:0 0;
}

.action{
    margin-top:5px;
    padding:5px;
    border-radius:5px;
    background-color:#333333;
    text-align:center;
    color:#fff;
    cursor:pointer;
}

JavaScript

$('#play').on('click',function(){
$("#bg").css({backgroundPosition:"0 0"}).animate({
    backgroundPositionX: "-220px"
}, 2500, "linear");
});

$('#reset').on('click',function(){
$("#bg").animate({
    backgroundPositionX: "0"
}, 500, "linear");
});