CODEWITHSUNDEEP
cssanimationdirection
LuckyCoder
LuckyCoder

Reputation: 520

CSS3 animation reverse direction

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

Upvotes: 1

Views: 604

Answers (2)

R&#239;sh&#239;K&#234;sh K&#252;mar
R&#239;sh&#239;K&#234;sh K&#252;mar

Reputation: 5092

I Think Its Work Fine

   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{
	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>

Upvotes: 3

Satheesh Kumar
Satheesh Kumar

Reputation: 2293

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

Upvotes: 1

Related Questions