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

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

在這里就跟大家說一下一個(gè)非常重要的標(biāo)簽：keyframes。動(dòng)畫該怎么動(dòng)？都全靠它了。keyframes的基本原理類似于flash的時(shí)間軸和關(guān)鍵幀，所以可以制作出很豐富的動(dòng)畫出來?？纯春?jiǎn)單的例子：

@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）;}

}

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

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