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