CSS3 transition-duration 属性

CSS3 提供了很多过渡效果，能够使得页面中的元素的变化显得更加生动有趣。其中，transition-duration 属性用于指定过渡效果的持续时间，也就是从开始状态到结束状态的过渡时长。

语法

transition-duration: time;

该属性只有一个值，即过渡效果的持续时间。可选单位包括 s（秒）和 ms（毫秒）。默认值是 0。

值

time 可以是一个数值，也可以是一个以秒为单位的数值和一个小数点之间的值，比如 0.5s（表示0.5秒），同样，也可以使用以毫秒为单位的值，比如 500ms（表示 500 毫秒）。

示例

以下实例显示了如何使用 transition-duration 属性来设置过渡效果的持续时间。

/* 将 div 元素的背景色从白色变成灰色，过度效果的持续时间为2秒 */
div {
    background-color: white;
    transition-property: background-color;
    transition-duration: 2s;
}

/* 当鼠标悬停在 div 元素上时，将背景色变成黑色，并且过渡效果的持续时间缩短为0.5秒 */
div:hover {
    background-color: black;
    transition-duration: 0.5s;
}

注意事项

1. transition-duration 属性必须搭配 transition-property 属性或 transition 属性使用。
2. 如果同时指定了多个属性，它们的过渡效果时间是一致的。
3. 过渡效果时间很短时，可能会看不出变化。建议设置合适的时间长度。
4. 过渡效果时间太长会给用户操作带来负担。
5. 如果元素上同时设置了多个过渡效果时间，它们会依次执行，但可能会出现相互冲突的现象。
6. 过渡效果时间必须是正数，否则不会生效。

浏览器兼容性

transition-duration 属性在现代浏览器上都能够支持。在 Internet Explorer 9 及以下版本的浏览器中不支持该属性。