2093浏覽量

因爲CSS3,動畫将一(yī)切皆有可能

來源: 時間:2012-12-17

   熱火(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ī)切皆有 可能

聯系我(wǒ)們

一(yī)次需求提交或許正是成就一(yī)個出色産品的開(kāi)始。
歡迎填寫表格或發送合作郵件至: qczsky@126.com

大(dà)理青橙科技

電(diàn)話(huà):13988578755 13988578755

郵箱:qczsky@126.com

地址:大(dà)理市下(xià)關龍都春天10層