熱火朝天的css3無疑吸引了很多前端開發者的眼球，然而在css3中的動畫屬性則是新功能中的主打招牌，說到css3的動畫屬性不得不讓人想起這三個屬性：Transform﹑Transition﹑Animation。 transform屬性雖然看起來可以實現動畫的效果，但本質其實是靜態的，說白一點其實就是一個圖形的變形工具；而transition屬性是一個簡單 的動畫屬性，操作起來非常的簡單；在這裡主要為大家介紹Animations屬性，這是個名副其實的動畫屬性，雖然官方也沒有過多的介紹，只是簡要的說明 這個屬性是transition屬性的擴展，但功能可謂十分的強大，Animations可以定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現複雜 的動畫效果。那麼Animation可以做出怎樣的動畫呢？可以這麼說吧，只要你有創意，你會折騰，那麼將一切皆有可能。
查看示例
相信大家對這個屬性也是比較了解的，所以也不過多的介紹其基礎知識。不是很了解的話，可以在網上找一下基礎知識，有很多相關的資料可以查閱。
在這裡就跟大家說一下一個非常重要的標籤：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來對時間段進行控制從而達 到高質量的動畫。相對比於flash來說，Animation動畫屬性卻毫不遜色，最大的優勢是製作簡單，僅僅的幾行代碼，卻可以渲染出豐富的動畫，這是 flash望塵莫及的。
上面連結是給大家整理一個示例頁面，其中的例子一部分是我自己製作的，一部分是來源於網絡收集的，旨在為大家展示更多更精彩的動畫效果，讓大家可以學習的 更多，如果你也有好的idea，歡迎分享給我們，添加到這個頁面來，這個示例頁面也將會不定期的持續更新，讓更多的人都知道，因為CSS3，動畫一切皆有 可能。
註：由於示例頁面不夠完善，所以暫時不提供附件下載。
原文地址：覺唯前端 轉載請註明原作者，謝謝。