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