語法:
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>
以上程式碼可以設定兩個屬性的過渡效果,屬性之間用逗號分隔。
下一節