CSS3参考手册
»
属性列表
»
过渡属性
»
相关内容：
其它过渡属性参考
选择其它项
transition-duration
版本：CSS3
继承性：无
语法：
transition-duration
：
<time>
[ ,
<time>
]*
默认值
：
0
适用于
：所有元素，包含伪对象:after和:before
继承性
：无
取值：
<time>
：
指定对象过渡的持续时间
说明：
检索或设置对象过渡的持续时间。
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为
transitionDuration
。
兼容性：
浅绿
= 支持
红色
= 不支持
墨绿
= 部分支持
橙色
= 实验性质
支持版本
\类型
IE
Firefox
Safari
Chrome
Opera
版本
6-9
4-18
5.1.7
13-23
11.5-12.5
版本
10
示例：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>transition-duration_CSS参考手册_web前端开发参考手册系列</title> <style> h1{font-size:16px;} .test{position:absolute;left:8px;width:200px;height:100px;margin:0 5px;padding:10px;border:1px solid #ddd;background-color:#eee;color:#000; -moz-transition-property:left; -moz-transition-duration:.5s; -moz-transition-timing-function:ease-in; -webkit-transition-property:left; -webkit-transition-duration:.5s; -webkit-transition-timing-function:ease-in; -o-transition-property:left; -o-transition-duration:.5s; -o-transition-timing-function:ease-in; -ms-transition-property:left; -ms-transition-duration:.5s; -ms-transition-timing-function:ease-in; transition-property:left; transition-duration:.5s; transition-timing-function:ease-in; } .test:hover{left:100px;} </style> </head> <body> <h1>请将鼠标移动到下面的矩形上：</h1> <div class="test">矩形在0.5s内慢慢向右移动<br />transition-duration:.5s;</div> </body> </html>