CODEWITHSUNDEEP
cssanimationinfinite-loop
user2493253
user2493253

Reputation: 27

Animating image in infinite loop using CSS

I have an image of clouds in a full-width <div> element. No matter the device, I want to animate the clouds so that they move left to right in an infinite loop, and when the edge of the image is reached, the image starts again.

How would I accomplish this?

(Here is the image of the clouds; note that the left edge height matches the right edge height)

1

Upvotes: 2

Views: 11615

Answers (1)

John Shang
John Shang

Reputation: 417

*{
	margin:0;
	padding:0;
}
@keyframes ani{
	0%{background-position: 0 0;}
	100%{background-position: 100vw 0;}
}
div{
	background:url(https://i.sstatic.net/iofJk.png) repeat-x 0 / 100% auto;
	height:500px; /* this value is not important, just not zero */
	animation: ani 10s linear infinite ;
}
<div></div>

Upvotes: 6

Related Questions