CSS3過(guò)渡 transition-property屬性
語(yǔ)法：
transition-property：all | none | <property>[ ,<property> ]*
?參數(shù)解析:
1.all:設(shè)置所有可以進(jìn)行過(guò)渡的屬性。
2.none:不指定可以進(jìn)行過(guò)渡的屬性。
3.<property>:指定可以進(jìn)行過(guò)渡的屬性。
特別說(shuō)明:
1.如果設(shè)置多個(gè)屬性，屬性名稱(chēng)之間用逗號(hào)分隔。
2.對(duì)應(yīng)的腳本屬性為transitionProperty。
transition-property是用來(lái)指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行transition效果，其主要有以下幾個(gè)值：none(沒(méi)有屬性改變)；all（所有屬性改變）這個(gè)也是其默認(rèn)值；indent（元素屬性名）。當(dāng)其值為none時(shí)，transition馬上停止執(zhí)行，當(dāng)指定為all時(shí)，則元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行transition效果，ident是可以指定元素的某一個(gè)屬性值。其對(duì)應(yīng)的類(lèi)型如下：
1、color: 通過(guò)紅、綠、藍(lán)和透明度組件變換（每個(gè)數(shù)值處理）如：background-color,border-color,color,outline-color等css屬性；
2、length: 真實(shí)的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等屬性；
3、percentage:真實(shí)的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；
4、integer離散步驟（整個(gè)數(shù)字），在真實(shí)的數(shù)字空間，以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生 如：outline-offset,z-index等屬性；
5、number真實(shí)的（浮點(diǎn)型）數(shù)值，如：zoom,opacity,font-weight,等屬性；
6、transform list:詳情請(qǐng)參閱：《CSS3 Transform》
7、rectangle:通過(guò)x, y, width 和 height（轉(zhuǎn)為數(shù)值）變換，如：crop
8、visibility: 離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility
9、shadow: 作用于color, x, y 和 blur（模糊）屬性,如：text-shadow
10、gradient: 通過(guò)每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類(lèi)型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫(huà),如：background-image
11、paint server (SVG): 只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類(lèi)似
12、space-separated list of above:如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無(wú)變化
13、a shorthand property: 如果縮寫(xiě)的所有部分都可以實(shí)現(xiàn)動(dòng)畫(huà)，則會(huì)像所有單個(gè)屬性變化一樣變化
具體什么css屬性可以實(shí)現(xiàn)transition效果，在W3C官網(wǎng)中列出了所有可以實(shí)現(xiàn)transition效果的CSS屬性值以及值的類(lèi)型，大家可以點(diǎn)這里了解詳情。這里需要提醒一點(diǎn)是，并不是什么屬性改變都為觸發(fā)transition動(dòng)作效果，比如頁(yè)面的自適應(yīng)寬度，當(dāng)瀏覽器改變寬度時(shí)，并不會(huì)觸發(fā)transition的效果。但上述表格所示的屬性類(lèi)型改變都會(huì)觸發(fā)一個(gè)transition動(dòng)作效果。
代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php中文網(wǎng).com/" />
<title>php中文網(wǎng)</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width;
-moz-transition-property:width;
-webkit-transition-property:width;
-o-transition-property:width;
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
-o-transition-duration:2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上代碼設(shè)置的過(guò)渡屬性為width。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
-o-transition-duration:2s;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上代碼可以設(shè)置兩個(gè)屬性的過(guò)渡效果，屬性之間用逗號(hào)分隔。
