熱火(huǒ)朝天的css3無疑吸引了很多前端開(kāi)發者的眼球，然而在css3中(zhōng)的動畫屬性則是新功能中(zhōng)的主打招牌，說到css3的動畫屬性不得不讓人想起這三個屬性：Transform﹑Transition﹑Animation。 transform屬性雖然看起來可以實現動畫的效果，但本質其實是靜态的，說白(bái)一(yī)點其實就是一(yī)個圖形的變形工(gōng)具；而transition屬性是一(yī)個簡單 的動畫屬性，操作起來非常的簡單；在這裏主要爲大(dà)家介紹Animations屬性，這是個名副其實的動畫屬性，雖然官方也沒有過多的介紹，隻是簡要的說明 這個屬性是transition屬性的擴展，但功能可謂十分(fēn)的強大(dà)，Animations可以定義多個關鍵幀以及定義每個關鍵幀中(zhōng)元素的屬性值來實現複雜(zá) 的動畫效果。那麽Animation可以做出怎樣的動畫呢？可以這麽說吧，隻要你有創意，你會折騰，那麽将一(yī)切皆有可能。

相信大(dà)家對這個屬性也是比較了解的，所以也不過多的介紹其基礎知(zhī)識。不是很了解的話(huà)，可以在網上找一(yī)下(xià)基礎知(zhī)識，有很多相關的資(zī)料可以查閱。

在這裏就跟大(dà)家說一(yī)下(xià)一(yī)個非常重要的标簽：keyframes。動畫該怎麽動？都全靠它了。keyframes的基本原理類似于flash的時間軸和關鍵幀，所以可以制作出很豐富的動畫出來。看看簡單的例子：

@keyframes demos{

from{transform:translate（0，0）;}

20%{transform:translate（20，20）;}

40%{transform:translate（40，0）;}

60%{transform:translate（60，20）;}

80%{transform:translate（80，0）;}

to{transform:translate（100，20）;}

}

上面的例子設置了一(yī)個名爲“demos”的動畫，其中(zhōng)的from、20%、40%、60%、80%、to分(fēn)别代表了在不同時間點上所對應的屬性效果 （from、to可以用0%和100%來表示，注意的是0%不可以縮寫成0）。由此可見，我(wǒ)們可以設置多個時間點的對應屬性效果，這樣子就極大(dà)的豐富了我(wǒ) 們的動畫效果。而在任意兩個時間點上，Animation會自動計算中(zhōng)間的過渡效果，同時我(wǒ)們也可以通過設置Animation來對時間段進行控制從而達 到高質量的動畫。相對比于flash來說，Animation動畫屬性卻毫不遜色，最大(dà)的優勢是制作簡單，僅僅的幾行代碼，卻可以渲染出豐富的動畫，這是 flash望塵莫及的。

上面鏈接是給大(dà)家整理一(yī)個示例頁面，其中(zhōng)的例子一(yī)部分(fēn)是我(wǒ)自己制作的，一(yī)部分(fēn)是來源于網絡收集的，旨在爲大(dà)家展示更多更精彩的動畫效果，讓大(dà)家可以學習的 更多，如果你也有好的idea，歡迎分(fēn)享給我(wǒ)們，添加到這個頁面來，這個示例頁面也将會不定期的持續更新，讓更多的人都知(zhī)道，因爲CSS3，動畫一(yī)切皆有 可能