CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果，通常在:hover、:focus的条件下触发。过去，为了实现这种平滑的过渡效果，我们需要借助于Flash技术，现在只需要简单的使用CSS3 Transition的方法，就可以实现。Transition的效果，可以广泛的应用在background-color、width、height、opacity等属性发生改变时。目前，CSS3 Transition模块还在草案阶段，所以规范和语法还未完全确定下来，目前也并不是所有的浏览器支持CSS3，所以还需要一些特殊的代码来实现多浏览器的兼容。
下面用一个简单的例子来说明CSS3 Transition的效果：
代码语言：css复制 #example1 { width:80%; padding:15px; font-size:14px; color:#fff; background-color:#ED8029; border-radius:5px; } #example1:hover { background-color:#A7B526; } #example2 { width:80%; padding:15px; font-size:14px; color:#fff; background-color:#ED8029; border-radius:5px; -webkit-transition:background-color 5s; -moz-transition:background-color 5s; -o-transition:background-color 5s; -ms-transition:background-color 5s; transition:background-color 5s; } #example2:hover { background-color:#A7B526; } h3 { margin:10px 0px; } Example 1: 没有过渡效果
Example 2: 5秒钟的过渡效果
代码语言：css复制.code { background-color:#ccc; padding:10px; }
CSS3 Transition的语法：
transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>这种写法是比较简单的写法，我们可以同时写多个Transition效果，每个效果按照固定属性的顺序书写。如下
代码语言：css复制transition:left 3s linear, background-color 3s ease;
.container { position:relative; padding:15px; height:50px; border:1px solid #ccc; width:80%; } #example3 { width:50px; height:50px; border-radius:5px; background-color:#08c; left:0px; top:0px; position:absolute; margin:15px; -webkit-transition:left 3s linear, background-color 3s ease; -moz-transition:left 3s linear, background-color 3s ease; -o-transition:left 3s linear, background-color 3s ease; -ms-transition:left 3s linear, background-color 3s ease; transition:left 3s linear, background-color 3s ease; } #example3:hover { left:300px; background-color:#000; } transition的属性包括：需要应用的属性transition-property、Transition的时间transition-duration、时间函数transition-timing-function、延迟时间（可选参数）transition-delay。这些属性也可以单独的指定，分别介绍如下：
transition-property
transition-property:none | all | [ <IDENT> ] [, <IDENT> ]*
如果使用all关键字或者省略了transition-property，那么所有发生变化的属性都会应用transition，如果使用none关键字，则不会有transition效果。如果指定了多个属性，那么在其他的transition-*属性中，也需要按照对应的顺序指定。所有支持Transition的属性，可以在3中看到。
transition-duration
这个属性接受以逗号分割的一系列数值，表示Transition持续的时间，接受2s或者2000ms的形式。默认值为0,表示Transition立即生效。
transition-duration: <time> [, <time> ]*
transition-timing-function
这个属性指定transition的效果，可以通过预定义的函数来实现（ease、linear、ease-in、ease-out、ease-in-out），也可以自己指定函数。
transition-timing-function:<timing-function> [, <timing-function>]*
下面看一下预定义的函数的效果
代码语言：css复制#ExampleB { width: 520px; } #ExampleB div { width: 100px; margin: 5px 0; padding: 5px; color: white; background-color: #ED8029; text-align: right; border-radius: 5px; } #ExampleB:hover div { width: 500px; } #ExampleB div.ease { -webkit-transition: 3s ease; -moz-transition: 3s ease; -o-transition: 3s ease; -ms-transition: 3s ease; transition: 3s ease; } #ExampleB div.linear { -webkit-transition: 3s linear; -moz-transition: 3s linear; -o-transition: 3s linear; -ms-transition: 3s linear; transition: 3s linear; } #ExampleB div.easein { -webkit-transition: 3s ease-in; -moz-transition: 3s ease-in; -o-transition: 3s ease-in; -ms-transition: 3s ease-in; transition: 3s ease-in; } #ExampleB div.easeout { -webkit-transition: 3s ease-out; -moz-transition: 3s ease-out; -o-transition: 3s ease-out; -ms-transition: 3s ease-out; transition: 3s ease-out; } #ExampleB div.easeinout { -webkit-transition: 3s ease-in-out; -moz-transition: 3s ease-in-out; -o-transition: 3s ease-in-out; -ms-transition: 3s ease-in-out; transition: 3s ease-in-out; } ease
linear
ease-in
ease-out
ease-in-out
transition-delay
这个是一个可选属性，可以用来制定在多长时间后触发transition，默认是0.
transition-delay: <time> [, <time> ]*
.reference { line-height:14px; margin-top:15px; } .reference p { line-height:14px; }
参考资料：
1、An Introduction to CSS3 Transitions
2、CSS3 transition-timing-function使用参考指南
3、CSS Transitions
