CSS3轉(zhuǎn)場 transition-property屬性
語法：
transition-property：all | none | <property>[ ,<property> ]*
?參數(shù)解析:
1.all:設(shè)定所有可以進行過渡的屬性。
2.none:不指定可以進行過渡的屬性。
3.<property>:指定可以進行過渡的屬性。
特別說明:
1.如果設(shè)定多個屬性，屬性名稱之間用逗號分隔。
2.對應的腳本屬性為transitionProperty。
transition-property是用來指定當元素其中一個屬性改變時執(zhí)行transition效果，其主要有以下幾個值：none(沒有屬性改變)；all（所有屬性改變）這個也是其預設(shè)值；indent（元素屬性名）。當其值為none時，transition馬上停止執(zhí)行，當指定為all時，則元素產(chǎn)生任何屬性值變化時都會執(zhí)行transition效果，ident是可以指定元素的某一個屬性值。其對應的類型如下：
1、color: 透過紅色、綠色、藍色和透明度元件轉(zhuǎn)換（每個數(shù)值處理）如：background-color,border-color,color,outline-color等css屬性;
2、length: 真實的數(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ù)字如：word-spacing,width,vertical -align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；
#4、integer離散步驟（整個數(shù)字），在真實的數(shù)字空間，以及使用floor()轉(zhuǎn)換為整數(shù)時發(fā)生如：outline-offset,z-index等屬性；
5、number真實的（浮點型）數(shù)值，如：zoom,opacity,font-weight,等屬性；
6、transform list:詳情請參閱：《CSS3 Transform》
7、rectangle:透過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: 透過每次停止時的位置和顏色進行變更。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動畫,如：background-image
11、paint server (SVG): 只支援下面的情況：從gradient到gradient以及color到color，然後工作與上面類似
12、space-separated list of above:如果列表有相同的項目數(shù)值，則列表每一項按照上面的規(guī)則進行變化，否則無變化
13、a shorthand property: 如果縮寫的所有部分都可以實現(xiàn)動畫，則會像所有單一屬性變化一樣變化
具體什麼css屬性可以實現(xiàn)transition效果，在W3C官網(wǎng)中列出了所有可以實現(xiàn)transition效果的CSS屬性值以及值的類型，大家可以點這裡了解詳情。這裡要提醒一點是，並不是什麼屬性改變都會觸發(fā)transition動作效果，例如頁面的自適應寬度，當瀏覽器改變寬度時，並不會觸發(fā)transition的效果。但上述表格所示的屬性類型改變都會觸發(fā)一個transition動作效果。
程式碼實例:
<!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è)定的過渡屬性為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è)定兩個屬性的過渡效果，屬性之間用逗號分隔。
