JSFiddle - React, Tailwind, and code Playground

HTML

<div id="matteo-container">
			<div id="matteo-character">
				<div id="matteo-walking"></div>
			</div>
		</div>

CSS

#matteo-container {
  position: absolute;
  left: 50%;
  bottom: 150px;
}

#matteo-character {
  position: relative;
  left: -50%;
  width: 150px;
  height: 200px;
  overflow: hidden;
}

#matteo-walking {
  background: url('http://www.matteoschiatti.it/fancycv/images/matteo-walking.png');
  position: absolute;
  height: 200px;
  width: 300px;
  left: 0;
  top: 0;
}

JavaScript

$(document).keydown(function(e){
    switch (e.which){
    case 37:    //left arrow key
        $("#matteo-walking").css("background-position-x", "-150px");
        break;
    case 39:    //right arrow key
        //$("#matteo-walking").css("background-position-x", "-150px");
        $("#matteo-walking").css("background-position-x", "0px");
        //$("#matteo-walking").css("background-position-x", "-150px");
        break;
    }
});

$(document).keyup(function(e){
    
    var step = 10;
    var distance = $("#matteo-walking").css("left").replace("px","") * 1 + step + "px";
    switch (e.which){
    case 37:    //left arrow key
        $("#matteo-walking").css("left", distance);
        break;
    case 39:    //right arrow key
        $("#matteo-walking").css("left", distance);
        break;
    }
});