閑談CSS3動(dòng)畫(huà)

隨著CSS3越來(lái)越熱，CSS3動(dòng)畫(huà)也逐漸受到大家的關(guān)注。這次有幸修改淘寶網(wǎng)全站頁(yè)頭，小小地應(yīng)用了下(詳見(jiàn)http://www.taobao.com/下拉箭頭處的hover效果)。與其說(shuō)是漸進(jìn)增強(qiáng)，不如說(shuō)是滿足了技術(shù)人小小的虛榮心。

以下是自己的一點(diǎn)理解，希望能對(duì)大家有所幫助。

…

關(guān)于CSS3動(dòng)畫(huà)

從(http://www.w3.org/Style/CSS/current-work)可以看出，CSS動(dòng)畫(huà)涉及的知識(shí)點(diǎn)包括 CSS 2D Transformations, CSS 3D Transformations, CSS Transitions, CSS Animations。

Transformation 補(bǔ)充定義了width, height, left, top等之外的一些可用于實(shí)現(xiàn)動(dòng)畫(huà)的屬性，如rotate, scale, skew。
Transition 和 Animation 用于定義動(dòng)畫(huà)的過(guò)程。其中Transition 可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)；Animation則可以通過(guò)設(shè)定多個(gè)關(guān)鍵幀實(shí)現(xiàn)相對(duì)復(fù)雜的動(dòng)畫(huà)。

…

Can I Use? 兼容性

(數(shù)據(jù)來(lái)自http://caniuse.com/)

可以看到，CSS Animation只有Safari支持，目前只能自己玩玩；而Transition用來(lái)做漸進(jìn)增強(qiáng)則較為合適。

…

一個(gè)簡(jiǎn)單的例子

需求：讓一個(gè)div元素在鼠標(biāo)移上去時(shí)變大1倍，旋轉(zhuǎn)180度，且背景由紅變藍(lán)。

html code::

<div></div>

css code::

div {    position: absolute;    left: 100px;    top: 100px;    width: 100px;    height: 100px;    background: red;    /* 定義動(dòng)畫(huà)的過(guò)程 */    -webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;    -moz-transition:    -moz-transform .5s ease-in, background .5s ease-in;    -o-transition:      -o-transform .5s ease-in, background .5s ease-in;    transition:         transform .5s ease-in, background .5s ease-in;}div:hover {    /*  定義動(dòng)畫(huà)的狀態(tài) */    -webkit-transform: rotate(180deg) scale(2);    -moz-transform: rotate(180deg) scale(2);    -o-transform: rotate(180deg) scale(2);    -transform: rotate(180deg) scale(2);    background: blue;}

demo (http://fiddle.jshell.net/NVErB/show/light/) (no IE)

…

無(wú)奈的瀏覽器前綴

這是個(gè)令人非常痛苦的問(wèn)題，因?yàn)椴坏貌会槍?duì)每個(gè)瀏覽器copy一遍重復(fù)代碼。

值得注意的是無(wú)前綴的標(biāo)準(zhǔn)代碼需放在最后。假如幾年后某個(gè)屬性成為標(biāo)準(zhǔn)，被瀏覽器默認(rèn)支持了，這行代碼會(huì)覆蓋前面的定義，使得瀏覽器可以優(yōu)先使用他。

…

稍微復(fù)雜點(diǎn)的例子(css3 animation)

需求：讓一個(gè)div元素在點(diǎn)擊后變大1倍，旋轉(zhuǎn)180度，且背景由紅變藍(lán)；然后向右移動(dòng)400px。

源碼請(qǐng)查看demo源文件。

demo (http://fiddle.jshell.net/a4r94/show/light/) (Safari, Chrome only)

…

驚艷！CSS 3D Transformations

見(jiàn)live demo (http://www.satine.org/research/webkit/snowleopard/snowstack.html) (Mac Safari Only，類(lèi)似于http://www.cooliris.com/的效果)，沒(méi)Mac的可以到(http://www.satine.org/archives/2009/07/11/snow-stack-is-here/)看視頻演示。

PS: Mac Safari的3D Transform、2D Transform和Opacity等視覺(jué)效果都是跑在GPU上的，為此我還特地驗(yàn)證下了Win Safari，果然不支持。

…

相關(guān)資料

webkit blog介紹animation/2d transforms/3d transforms的三篇文章
http://webkit.org/blog/138/css-animation/
http://webkit.org/blog/130/css-transforms/
http://webkit.org/blog/386/3d-transforms/

W3組織的CSS規(guī)范集
http://www.w3.org/Style/CSS/current-work

蘋(píng)果官方關(guān)于CSS視覺(jué)效果的文檔
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction/Introduction.html

css animation的兼容性數(shù)據(jù)來(lái)源
http://caniuse.com/

3d transform的運(yùn)用app
http://www.satine.org/research/webkit/snowleopard/snowstack.html
http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html
http://www.fofronline.com/experiments/cube-3d/

css3動(dòng)畫(huà)的應(yīng)用
http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/
http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html

css3 animation的入門(mén)應(yīng)用：鐘的實(shí)現(xiàn)
http://g-zone.org/test/g-clock/index.html

…

完

出處：http://ued.taobao.com/blog/2010/05/05/css3-animation/

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)