CSS3参考手册
»
属性列表
»
过渡属性
»
相关内容：
其它过渡属性参考
选择其它项
transition-duration
版本：CSS3
2015.8.12
语法：
transition-duration
：
<time>
[ ,
<time>
]*
默认值
：
0
适用于
：所有元素，包含伪对象:after和:before
继承性
：无
动画性
：否
计算值
：指定值
媒体
：交互
取值：
<time>
：
指定对象过渡的持续时间
说明：
检索或设置对象过渡的持续时间。
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为
transitionDuration
。
兼容性：
浅绿
= 支持
红色
= 不支持
粉色
= 部分支持
Values
IE
Firefox
Chrome
Safari
Opera
iOS Safari
Android Browser
Android Chrome
Basic Support
6.0-9.0
2.0-3.6
4.0-25.0
-webkit-
6.0
-webkit-
15.0+
6.0-6.1
-webkit-
2.1-4.3
-webkit-
18.0-24.0
-webkit-
10.0+
4.0-15.0
-moz-
26.0+
6.1+
7.0+
4.4.4+
25.0+
16.0+
示例：
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>transition-duration_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <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; -webkit-transition-timing-function:ease-in; -moz-transition-timing-function:ease-in; transition-timing-function:ease-in; -webkit-transition-property:left; -moz-transition-property:left; transition-property:left; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; transition-duration:.5s; } .test:hover{left:100px;} </style> </head> <body> <h1>请将鼠标移动到下面的矩形上：</h1> <div class="test">矩形在0.5s内慢慢向右移动<br />transition-duration:.5s;</div> </body> </html>