闲谈CSS3动画_HTML5中文网 - 中国领先的HTML5技术门户--HTML5中文学习网

随着CSS3越来越热，CSS3动画也逐渐受到大家的关注。这次有幸修改淘宝网全站页头，小小地应用了下(详见http://www.taobao.com/下拉箭头处的hover效果)。与其说是渐进增强，不如说是满足了技术人小小的虚荣心。

以下是自己的一点理解，希望能对大家有所帮助。

…

淘宝案例解析

需求：鼠标移动到菜单上时旋转箭头，且给支持CSS3的浏览器加上旋转动画。

源码请查看demo源文件。

demo (http://fiddle.jshell.net/pjRVT/show/light/)

…

关于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/)

	IE	Firefox	Safari	Chrome	Opera
CSS 2D Transform	no	3.5	3.2	2.0	10.5
CSS 3D Transform	no	no	4.* (Mac)	no	no
CSS Transition	no	3.7	3.2	2.0	10.5
CSS Animation	no	no	4.0	2.0	no

可以看到，CSS Animation目前只有Webkit内核浏览器支持，目前只能自己玩玩；而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)

…