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

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

在這里就跟大家說一下一個非常重要的標簽：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）;}

}

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

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