animation-timing-function [播放方式]

### 语法
```css
/*指定对象动画的持续时间 。*/
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) [, linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ]*;
```
<table class="table"><thead><tr><th width="20%">语法项目</th><th>说明</th></tr></thead><tbody><tr><td>初始值</td><td>ease</td></tr><tr><td>适用于</td><td>所有元素</td></tr><tr><td>可否继承</td><td>否</td></tr><tr><td>媒介</td><td>视觉</td></tr><tr><td>版本</td><td>CSS3.0</td></tr></tbody></table>

### 说明
检索或设置对象动画的过渡类型
如果提供多个属性值，以逗号进行分隔。

### 取值
`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)`函数。

`step-start`：马上转跳到动画结束状态。

`step-end`：保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。

`steps(<number>[, [ start | end ] ]?)`：第一个参数`number`为指定的间隔数，即把动画分为`n`步阶段性展示，第二个参数默认为`end`，设置最后一步的状态，`start`为结束时的状态，`end`为开始时的状态，若设置与`animation-fill-mode`的效果冲突，而以`animation-fill-mode`的设置为动画结束的状态。

`cubic-bezier(<number>, <number>, <number>, <number>)`：特殊的立方贝塞尔曲线效果。

### 实例代码
<iframe src="http://example.itshubao.com/inexample/440.html" width="100%" height="500px" 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>目前暂无版本支持</td><td>Safari 10+</td><td>Chrome 2.0+</td></tr></tbody></table>