transition-property

语法：

transition-property：none | <single-transition-property>[ ,<single-transition-property> ]*

<single-transition-property> = all | <IDENT>

默认值：all

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

继承性：无

动画性：否

计算值：指定值

媒体：视觉

取值：

none：: 不指定过渡的css属性
all：: 所有可以进行过渡的css属性
<IDENT>：: 指定要进行过渡的css属性

说明：

检索或设置对象中的参与过渡的属性。

默认值为：all。默认为所有可以进行过渡的css属性。
如果提供多个属性值，以逗号进行分隔。
对应的脚本特性为transitionProperty。

有过渡效果的属性：

属性名称	类型
transform	all
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

兼容性：

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

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-property_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{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}
.test li {
	float:left;width:170px;height:100px;margin:0 5px;padding:10px;border:1px solid #ddd;background-color:#eee;color:#000;
	-webkit-transition-property:border-color,background-color,color;
	-moz-transition-property:border-color,background-color,color;
	-o-transition-property:border-color,background-color,color;
	transition-property:border-color,background-color,color;
	-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-duration:.5s;
	-moz-transition-duration:.5s;
	-o-transition-duration:.5s;
	transition-duration:.5s;
}
.test li:hover{border-color:#999;background-color:#bbb;color:#999;}
</style>
</head>
<body>
<h1>请将鼠标移动到下面的矩形上：</h1>
<ul class="test">
	<li>本次设置过渡的属性： border-color, background-color, color</li>
</ul>
</body>
</html>