css3動畫部分 · 多谷微信平臺開發指南

隨著CSS3越來越熱，CSS3動畫也逐漸受到大家的關注以下是自己的一點理解，希望能對大家有所幫助。 … ## 淘寶案例解析 ![](http://img04.taobaocdn.com/tps/i4/T1ztVzXXhDXXXXXXXX-226-58.png) 需求：鼠標移動到菜單上時旋轉箭頭，且給支持CSS3的瀏覽器加上旋轉動畫。源碼請查看demo源文件。 demo ([http://fiddle.jshell.net/pjRVT/show/light/](http://fiddle.jshell.net/pjRVT/show/light/)) … ## 關于CSS3動畫從([http://www.w3.org/Style/CSS/current-work](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/](http://caniuse.com/)) <table style="border: 1px solid #ccc" cellspacing="3"> <tbody> <tr style="background: #f2f2f2"> <th width="140"> </th> <th width="40">IE</th> <th width="60">Firefox</th> <th width="80">Safari</th> <th width="60">Chrome</th> <th width="60">Opera</th> </tr> <tr> <td style="font-weight: bold">CSS 2D Transform</td> <td style="color:red">no</td> <td>3.5</td> <td>3.2</td> <td>2.0</td> <td>10.5</td> </tr> <tr> <td style="font-weight: bold">CSS 3D Transform</td> <td style="color:red">no</td> <td style="color:red">no</td> <td>4.* (Mac)</td> <td style="color:red">no</td> <td style="color:red">no</td> </tr> <tr> <td style="font-weight: bold">CSS Transition</td> <td style="color:red">no</td> <td>3.7</td> <td>3.2</td> <td>2.0</td> <td>10.5</td> </tr> <tr> <td style="font-weight: bold">CSS Animation</td> <td style="color:red">no</td> <td style="color:red">no</td> <td>4.0</td> <td>2.0</td> <td style="color:red">no</td> </tr> </tbody> </table> <span id="more-1969"></span> 可以看到，CSS Animation目前只有Webkit內核瀏覽器支持，目前只能自己玩玩；而Transition用來做漸進增強則較為合適。 … ## 一個簡單的例子需求：讓一個div元素在鼠標移上去時變大1倍，旋轉180度，且背景由紅變藍。 html code:: <div></div> `</pre> css code:: <pre>`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/](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/](http://fiddle.jshell.net/a4r94/show/light/)) (Safari, Chrome only) … ## 驚艷！CSS 3D Transformations 見live demo ([http://www.satine.org/research/webkit/snowleopard/snowstack.html](http://www.satine.org/research/webkit/snowleopard/snowstack.html)) (Mac Safari Only，類似于http://www.cooliris.com/的效果)，沒Mac的可以到(h[ttp://www.satine.org/archives/2009/07/11/snow-stack-is-here/](//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/138/css-animation/) [http://webkit.org/blog/130/css-transforms/](http://webkit.org/blog/130/css-transforms/) [http://webkit.org/blog/386/3d-transforms/](http://webkit.org/blog/386/3d-transforms/) **W3組織的CSS規范集** [http://www.w3.org/Style/CSS/current-work](http://www.w3.org/Style/CSS/current-work) **蘋果官方關于CSS視覺效果的文檔** [http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction/Introduction.html](http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction/Introduction.html) **css animation的兼容性數據來源** [http://caniuse.com/](http://caniuse.com/) **3d transform的運用app** [http://www.satine.org/research/webkit/snowleopard/snowstack.html](http://www.satine.org/research/webkit/snowleopard/snowstack.html) [http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html](http://css-vfx.googlecode.com/svn/trunk/examples/zflow.html) [http://www.fofronline.com/experiments/cube-3d/](http://www.fofronline.com/experiments/cube-3d/) **css3動畫的應用** [http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/](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](http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html) [http://www.optimum7.com/css3-man/animation.html](http://www.optimum7.com/css3-man/animation.html) [http://hedgerwow.appspot.com/demo/flippage](http://hedgerwow.appspot.com/demo/flippage) [http://neography.com/journal/our-solar-system-in-css3/](http://neography.com/journal/our-solar-system-in-css3/) [http://css-tricks.com/examples/StarryNightCSS3/](http://css-tricks.com/examples/StarryNightCSS3/) [http://www.dmxzone.com/demo/dmxAnimator/effects/slide_out_menu.html](http://www.dmxzone.com/demo/dmxAnimator/effects/slide_out_menu.html) **css3 animation的入門應用：鐘的實現** [http://g-zone.org/test/g-clock/index.html](http://g-zone.org/test/g-clock/index.html) … 完