使用 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>