随着CSS3越来越热，CSS3动画也逐渐受到大家的关注 以下是自己的一点理解，希望能对大家有所帮助。 … ## 淘宝案例解析  需求：鼠标移动到菜单上时旋转箭头，且给支持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">&nbsp;</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:: &lt;div&gt;&lt;/div&gt; `</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) … 完