JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>fs Background Anim Test</title>
	</head>
	<body>
		<div class="test"></div>	
	</body>
</html>

CSS

.test {
	width: 400px;
	height: 400px;
	background: url('http://img.fusynth.com/600/artists/8.jpg');
	background-size: cover;
	background-position-x: 0.01px;
	-webkit-transform: translateX(0.01px);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
    -webkit-transition: background-position-x 15s linear;
    -moz-transition: background-position-x 15s linear;
    -o-transition: background-position-x 15s linear;
    -ms-transition: background-position-x 15s linear;
    transition: background-position-x 15s linear;
}
.test:hover {
	background-position-x: -100.01px;
	-webkit-transition: background-position-x 15s linear;
    -moz-transition: background-position-x 15s linear;
    -o-transition: background-position-x 15s linear;
    -ms-transition: background-position-x 15s linear;
    transition: background-position-x 15s linear;
}