CSS3 animation reverse direction

Question

Let me paste my code first

p{
	width: 100px;
	margin:auto;
	text-align:center;
	}
	p:hover{
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
		background-repeat: no-repeat;
		background-position: -100% 6px;
		animation-name: in;
		animation-duration: 1s;
		/*animation-direction: reverse;*/
	}
	
	@keyframes in {
  		0% { background-position: -100% 6px; }
  		100% { background-position: 100% 6px; }
}
	

<p>TESTING</p>

Demo

I want the background to animate from left to right but failed to acquire that. I tried animation-direction: reverse; without any luck.

Can you guys please guide me to solve this?

Thanks

Answer 1

Try to apply background-position: 200% 6px; for the keyframe 100%.

p{
		width: 100px;
		margin:auto;
		text-align:center;
	}
	p:hover{
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
		background-repeat: no-repeat;
     background-position: -100% 1px;
		animation-name: in;
		animation-duration: 1s;
     animation-direction: reverse;
	}
	
	@keyframes in {
  		0% { background-position: 100% 6px; }
  		100% { background-position: 200% 6px; }
        }

<p>TESTING</p>

Here is the codepen demo