transition-duration [过渡时间]

`transition-duration`用来定义转换动画的时间长度，即从旧属性换到新属性花费的时间，单位为秒。

默认情况下动画过渡时间为0秒，所以当我们指定元素动画时会看不到过渡的过程直接看到结果。

### 语法
```css
/*设置动画的过渡时间。*/
transition-duration: <time>[ ,<time>]*;
```
<table class="table"><thead><tr><th width="20%">语法项目</th><th>说明</th></tr></thead><tbody><tr><td>初始值</td><td>0</td></tr><tr><td>适用于</td><td>所有元素，以及:before和:after伪元素</td></tr><tr><td>可否继承</td><td>否</td></tr><tr><td>媒介</td><td>视觉</td></tr><tr><td>版本</td><td>CSS3.0</td></tr></tbody></table>

### 说明
`transition-duration`可以设置动画过渡的时间[执行时间]，默认值0表示不过渡直接看到执行后的结果。单位是秒，也可以是毫秒。

### 取值
`0`：不执行过渡，直接看到结果。

`time`：指定动画执行的时间。

### 实例代码
<iframe src="http://example.itshubao.com/inexample/435.html" width="100%" height="180px" 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>