CSS3 中 Animation 动画示例漂浮的云

Question

背景动画如果用的恰当，会给网页带来意想不到的效果。在过去我们只能用 Flash 或 JavaScript 来实现。幸运的是，CSS3 的流行使得我们完全可以使用它来实现这种效果，不再依赖其它编程技术，一段简单的 CSS 代码就能轻而易举的达到下面的效果。

这种背景动画是通过移动背景图的位置实现的，这里没有使用CSS3的transition，而是用animation。

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

上面是动画定义，下面就要把它应用到一个具有背景图的页面元素上：

#animate-area	{ 
	width: 560px; 
	height: 400px; 
	background-image: url(bg-clouds.png);
	background-position: 0px 0px;
	background-repeat: repeat-x;
	animation: animatedBackground 40s linear infinite;
}

背景云图片以 40 秒一次的速度顺滑优雅的从左漂移到右，而且无缝的和下一次循环对接，这样无限循环漂浮下去。

不再需要 JavaScript 来操作动画是一件多么让人欣慰的事，虽然这些 CSS 写法上还需要加一些浏览器引擎兼容前缀，看起来很讨厌，但至少比以前高效多了，而且易于配置。

英文原文：davidwalsh