JSFiddle - React, Tailwind, and code Playground

by Adam Smith

HTML

<div class="container">
	<div class="anim-div"></div>
</div>

CSS

.container {
	width: 350px;
	height: 10px;
	overflow: hidden;
	border: solid 1px black;
	position: relative;
}

.anim-div {
	width: 50px;
	height: 10px;
	background: #000;
	position: absolute;
}

.anim-div_active {
	/*animation: moving 2s linear infinite alternate;*/
}

.anim-div_return {
	transition: left 0.5s linear;
}

@keyframes moving {
	0% {
		left: 0;
	}
	100% {
		left: 300px;
	}
}

JavaScript

var $animDiv = $('.anim-div');
var leftValue = 0;
var get_leftValue;
$('.container').hover(function() {
	$animDiv.removeClass('anim-div_return').addClass('anim-div_active');
	get_leftValue = setInterval(function(){
		//leftValue = $animDiv.css('left');
		$animDiv.css('left',leftValue++);
	}, 5);
},function() {
	$animDiv.css('left',leftValue).removeClass('anim-div_active');
	clearInterval(get_leftValue);

	requestAnimationFrame(function() {
		$animDiv.addClass('anim-div_return').css('left',0);
		leftValue = 0;
	});
});