閑談CSS3動畫

隨著CSS3越來越熱，CSS3動畫也逐漸受到大家的關注。這次有幸修改淘寶網全站頁頭，小小地應用了下(詳見http://www.taobao.com/下拉箭頭處的hover效果)。與其說是漸進增強，不如說是滿足了技術人小小的虛榮心。

以下是自己的一點理解，希望能對大家有所幫助。

…

關于CSS3動畫

從(http://www.w3.org/Style/CSS/current-work)可以看出，CSS動畫涉及的知識點包括 CSS 2D Transformations, CSS 3D Transformations, CSS Transitions, CSS Animations。

Transformation 補充定義了width, height, left, top等之外的一些可用于實現動畫的屬性，如rotate, scale, skew。
Transition 和 Animation 用于定義動畫的過程。其中Transition 可以實現簡單的動畫；Animation則可以通過設定多個關鍵幀實現相對復雜的動畫。

…

Can I Use? 兼容性

(數據來自http://caniuse.com/)

可以看到，CSS Animation只有Safari支持，目前只能自己玩玩；而Transition用來做漸進增強則較為合適。

…

一個簡單的例子

需求：讓一個div元素在鼠標移上去時變大1倍，旋轉180度，且背景由紅變藍。

html code::

<div></div>

css code::

div {    position: absolute;    left: 100px;    top: 100px;    width: 100px;    height: 100px;    background: red;    /* 定義動畫的過程 */    -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 {    /*  定義動畫的狀態 */    -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)

…

無奈的瀏覽器前綴

這是個令人非常痛苦的問題，因為不得不針對每個瀏覽器copy一遍重復代碼。

值得注意的是無前綴的標準代碼需放在最后。假如幾年后某個屬性成為標準，被瀏覽器默認支持了，這行代碼會覆蓋前面的定義，使得瀏覽器可以優先使用他。

…

稍微復雜點的例子(css3 animation)

需求：讓一個div元素在點擊后變大1倍，旋轉180度，且背景由紅變藍；然后向右移動400px。

源碼請查看demo源文件。

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

…

驚艷！CSS 3D Transformations

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

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

…

相關資料

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規范集
http://www.w3.org/Style/CSS/current-work

蘋果官方關于CSS視覺效果的文檔
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction/Introduction.html

css animation的兼容性數據來源
http://caniuse.com/

3d transform的運用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動畫的應用
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的入門應用：鐘的實現
http://g-zone.org/test/g-clock/index.html

…

完

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈