CSS3 transition-property 属性CSS3 transition-delay 属性
CSS3 transition-duration 属性使用方法及示例
transition-duration CSS属性指定过渡动画完成所需的秒数或毫秒数。
下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。
| 默认值： | 0s |
|---|---|
| 适用于： | 所有元素::before和::after 伪元素 |
| 继承： | 没有 |
| 可动画制作： | 否。请参见 动画属性。 |
| 版本： | CSS3的新功能 |
| JavaScript语法： | object.style.transitionDuration="5s" |
transition-duration的使用语法
该属性的语法如下：
transition-duration: time | initial | inherit
下面的示例演示了如何使用transition-duration属性。
button {
background: #fd7c2a;
/* For Safari 3.0+ */
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
transition-property: background;
transition-duration: 2s;
}
button:hover {
background: #3cc16e;
}测试看看‹/›属性值
下表描述了此属性的值。
| 值 | 描述 |
|---|---|
| time | 指定完成过渡所需的时间。默认值为0s。负值无效。 |
| initial | 将此属性设置为其默认值。 |
| inherit | 如果指定，则关联元素采用其父元素transition-duration的属性值。 |
浏览器兼容性
transition-duration属性浏览器的兼容性，下表中的数字表示支持该属性的浏览器最低版本号；所有主流浏览器均支持该属性。
 |
|
进一步阅读
请参考以下教程：CSS3 Transitions。
相关属性：transition，transition-delay，transition-property，transition-timing-function。
CSS3 transition-property 属性CSS3 transition-delay 属性