用CSS3的animation轻松实现背景动画：漂浮的云

背景动画若是用的恰当，会给网页带来意想不到的效果。在过去，咱们只能用flash或Javascript来实现。幸运的是，CSS3的流行使得咱们彻底能够使用它来实现这种效果，再也不依赖其它编程技术。一段简单的CSS代码就能垂手可得的达到下面的效果。

慢悠悠的云

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秒一次的速度顺滑优雅的从左漂移到右，并且无缝的和下一次循环对接，这样无限循环漂浮下去。

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

观看演示

(英文：davidwalsh.)