transition-timing-function [过渡效果]

`transition-timing-function`用来定义过渡动画的效果。

### 语法
```css
/*设置动画执行的方式（缓动效果）。*/
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]* ;
```

### 说明
`transition-timing-function`可以设置动画的过渡效果，默认值`ease`。

### 取值
`ease`：缓解效果，等同于`cubic-bezier(0.25,0.1,0.25,1.0)`函数，既立方贝塞尔。

`linear`：线性效果，等同于`cubic-bezier(0.0,0.0,1.0,1.0)`函数。

`ease-in`：渐显效果，等同于`cubic-bezier(0.42,0,1.0,1.0)`函数。

`ease-out`：渐隐效果，等同于`cubic-bezier(0,0,0.58,1.0)`函数。

`ease-in-out`：渐显渐隐效果，等同于`cubic-bezier(0.42,0,0.58,1.0)`函数。

`cubic-bezier`：特殊的立方贝塞尔曲线效果。

### 实例代码
<iframe src="http://example.itshubao.com/inexample/437.html" width="100%" height="430px" frameborder="0" scrolling="no"></iframe>

### 兼容性
<table class="table"><thead><tr><th class="ie" width="20%">IE</th><th class="firefox" width="20%">Firefox</th><th class="opera" width="20%">Opera</th><th class="safari" width="20%">Safari</th><th class="chrome" width="20%">Chrome</th></tr></thead><tbody><tr><td>IE 10+</td><td>Firefox 3.5+</td><td>Opera 11.50+</td><td>Safari 10+</td><td>Chrome 2.0+</td></tr></tbody></table>