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