JSFiddle - React, Tailwind, and code Playground

by Abin Thaha Azeez

HTML

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

CSS

#matteo-container {
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQn0h5fKxN_clLSFigY5o6e8uQfTGsx_0y4M6Ff5IsFa2VPgTGxJw);
    background-size: cover;
    height: 500px;
    position: relative;
		transition: all 0.3s ease;
		background-position: 0 bottom;
    -webkit-transition:background-position .1s ease-in;  
    -moz-transition:background-position .1s ease-in;  
    -o-transition:background-position .1s ease-in;  
    transition:background-position .1s ease-in; 
		background-repeat: repeat-x;
}

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

#matteo-walking {
  background: url('http://www.matteoschiatti.it/fancycv/images/matteo-walking.png');
  position: absolute;
  height: 200px;
  width: 120px;
  left: 0;
  top: 0;
}
#matteo-walking.movement {
    animation-name: moving;
    animation-duration: 0.23s;
		animation-iteration-count: infinite;
		animation-timing-function: step-start;
}

#matteo-walking.backward {
	-webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

@keyframes moving {
    0% { background-position: 0 0;}
    50% { background-position: -150px 0;}
		100% { background-position: 0 0;}
}

JavaScript

var currentPosition = 0;
var moveVal = 25;
$(document).keydown(function(e){
    switch (e.which){
    case 37:    //left arrow key
				currentPosition += moveVal;
				$('#matteo-walking').addClass('backward');
        break;
    case 39:    //right arrow key
				currentPosition -= moveVal;
				$('#matteo-walking').removeClass('backward');
        break;
    }
		startMovement();
		setBgPos(currentPosition);
});

$(document).keyup(function(e){
    endMovement()
});

function startMovement() {
	$('#matteo-walking').addClass('movement');
}

function endMovement() {
	$('#matteo-walking').removeClass('movement');
}

function setBgPos(currentPosition) {
	$('#matteo-container').css('background-position', currentPosition + 'px bottom');
}