transition-duration

语法：

transition-duration：<time>[ ,<time> ]*

默认值：0

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：指定值

媒体：交互

取值：

<time>：: 指定对象过渡的持续时间

说明：

检索或设置对象过渡的持续时间。

如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为transitionDuration。

兼容性：

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Blackberry Browser	Opera Mobile	Chrome for Android	Firefox for Android	IE Mobile	UC Browser for Android	Samsung Internet	QQ Browser	Baidu Browser
5.5-9	12+	2-3.6	4-25 ^-webkit-	3.1-5 ^-webkit- #1	9-10.1	3.2-5.1 ^-webkit- #1	2.1-4.3 ^-webkit-	7 ^-webkit-	10-11.5 ^-o- #1	61	56	10+	11.4	4+	1.2	7.12
10+		4 ^-moz- #1	26+	5.1-6 ^-webkit-	10.5-11.6 ^-o- #1	6.0-6.1 ^-webkit-	4.4+	10	12 ^-o-
		5-15 ^-moz-		6.1+	12 ^-o-	7.0+			12.1+
		16+		6.1+	12.1+	7.0+			12.1+

通过selectivizr，可以免去css3前缀。本页下方的示例已使用此方案。

示例：

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<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;
	-o-transition-timing-function:ease-in;
	transition-timing-function:ease-in;
	-webkit-transition-property:left;
	-moz-transition-property:left;
	-o-transition-property:left;
	transition-property:left;
	-webkit-transition-duration:.5s;
	-moz-transition-duration:.5s;
	-o-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>