CSS3 transition-duration 属性
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;
}
注意事项
transition-duration
属性必须搭配transition-property
属性或transition
属性使用。- 如果同时指定了多个属性,它们的过渡效果时间是一致的。
- 过渡效果时间很短时,可能会看不出变化。建议设置合适的时间长度。
- 过渡效果时间太长会给用户操作带来负担。
- 如果元素上同时设置了多个过渡效果时间,它们会依次执行,但可能会出现相互冲突的现象。
- 过渡效果时间必须是正数,否则不会生效。
浏览器兼容性
transition-duration
属性在现代浏览器上都能够支持。在 Internet Explorer 9 及以下版本的浏览器中不支持该属性。