CSS transition-duration 属性
CSS transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
实例
让过渡效果持续 5 秒：
<!DOCTYPE html><html><head><style>div{width:100px;height:100px;background:blue;transition-property:width;transition-duration:5s;/* Firefox 4 */-moz-transition-property:width;-moz-transition-duration:5s;/* Safari and Chrome */-webkit-transition-property:width;-webkit-transition-duration:5s;/* Opera */-o-transition-property:width;-o-transition-duration:5s;}div:hover{width:300px;}</style></head><body><div></div><p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p><p><b>注释：</b>本例在 Internet Explorer 中无效。</p></body></html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| transition-duration | 26.04.0 -webkit- | 10.0 | 16.04.0 -moz- | 6.13.1 -webkit- | 12.110.5 -o- |
定义和用法
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
| 默认值： | 0 |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.transitionDuration="5s" |
语法
transition-duration: time;
| 值 | 描述 |
|---|---|
| time | 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。 |