使用CSS在无限循环中动画图像

Question

我有一个全宽<div>元素的云图像。无论设备如何，我都希望为云设置动画，使它们在无限循环中从左向右移动，当到达图像边缘时，图像会再次启动。

我将如何做到这一点？

（这是云的图像;请注意左边缘高度与右边缘高度匹配）

Answer 1

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

<div></div>