初探CSS3 - 过渡属性transition
CSS3的过渡能够为元素的变化提供更平滑、细腻的用户体验。比如在CSS2.1的时候，我们使用 :hover 伪类改变链接颜色时候，颜色会很生硬直接地由一种颜色变化到另外一种颜色。但是在使用CSS3的过渡属性之后，这种颜色的变化会更加生动细腻。
以下是创建过渡的基本步骤：
1，在默认样式中声明元素的初始状态样式
2，声明过渡元素的最终样式
3，在初始状态样式中添加过渡函数
CSS3的过渡属性是 transition ，transition是一个复合属性，简化的语法如下所示：
transition:[<‘transition-property‘> || <‘transition-duration‘> || <‘transition-timeing-function‘> || <‘transition-delay‘>]*
主要包含一下几个属性
transition-property 指定过渡或动态模拟的CSS属性
transition-duration 指定完成过渡所需要的时间
transition-timing-function 指定过渡函数
transition-delay 指定过渡开始出现的延迟时间
我们先看一个简单的例子
<!DOCTYPE html> <html> <head> <title>transition</title> <meta charset="utf-8" /> <style type="text/css"> body{background:#eee;} *{margin:0; padding:0; font-family:Arial,"微软雅黑"; cursor:default;} .wrap{margin:100px;} .wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;} .wrap:hover{background:#FFC631;} </style> </head> <body> <div class="wrap"></div> </body> </html>
transition-property 属性规定应用过渡效果的 CSS 属性的名称，必须要设置这个属性，否则将不会有任何效果产生。默认值为all，任何可以过渡的元素都会进行过渡。并不是所有的属性都能进行过渡，以下这些常见的属性能进行过渡。
| 属性名 | 类型 |
|---|---|
| background-color | color |
| background-image | only gradients |
| background-position | percentage, length |
| border-bottom-color | color |
| border-bottom-width | length |
| border-color | color |
| border-left-color | color |
| border-left-width | length |
| border-right-color | color |
| border-right-width | length |
| border-spacing | length |
| border-top-color | color |
| border-top-width | length |
| border-width | length |
| bottom | length, percentage |
| color | color |
| crop | rectangle |
| font-size | length, percentage |
| font-weight | number |
| grid-* | various |
| height | length, percentage |
| left | length, percentage |
| letter-spacing | length |
| line-height | number, length, percentage |
| margin-bottom | length |
| margin-left | length |
| margin-right | length |
| margin-top | length |
| max-height | length, percentage |
| max-width | length, percentage |
| min-height | length, percentage |
| min-width | length, percentage |
| opacity | number |
| outline-color | color |
| outline-offset | integer |
| outline-width | length |
| padding-bottom | length |
| padding-left | length |
| padding-right | length |
| padding-top | length |
| right | length, percentage |
| text-indent | length, percentage |
| text-shadow | shadow |
| top | length, percentage |
| vertical-align | keywords, length, percentage |
| visibility | visibility |
| width | length, percentage |
| word-spacing | length, percentage |
| z-index | integer |
| zoom | number |
transition-duration属性指定过渡完成所需要的时间，默认值为0，同样也可以设置多个值，如下：
.wrap{transition-property:background,border-radius; transition-duration:0.5s,0.5s; transition-timing-function:ease-in-out,ease-in-out; width:100px; height:100px; background:#92B901;} .wrap:hover{background:#FFC631; border-radius:50%;}
trabsition-timing-function属性指定某种指代过渡的”缓动函数“。可以将属性值设置为单一过渡函数、三次贝塞尔曲线和阶梯函数。
单一过渡函数
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
transition-delay属性用来定义延迟时间，也就是说改变元素属性值之后多长时间开始执行过渡效果，默认为0。将上面的例子增加延迟时间就可以制作出一个队列动画：
transition-delay:0,0.5s;
最后，transiton属性和其他CSS3属性一样摆脱不了浏览器的兼容问题。因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的transition属性，那么这种效果就会自动加上去。