用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.)