CSS3 transition-property 屬性
實例
將鼠標懸停在一個div元素上，逐步改變表格的寬度：
div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;}
嘗試一下»
在此頁底部有更多的例子。
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在-webkit-, -ms- 或-moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。
| 属性 | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
屬性定義及使用說明
transition-property屬性指定CSS屬性的nametransition效果（transition效果時將會啟動指定的CSS屬性的變化）。
提示:一個轉場效果，通常會出現在當用戶將鼠標懸停在一個元素上時。
注意：始終指定transition-duration屬性，否則持續時間為0，transition不會有任何效果。
| 默認值： | all |
|---|---|
| 繼承： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.transitionProperty="width,height" |
語法
transition-property: none|all|
property;
| 值 | 描述 |
|---|---|
| none | 沒有屬性會獲得過渡效果。 |
| all | 所有屬性都將獲得過渡效果。 |
| property | 定義應用過渡效果的CSS 屬性名稱列表，列表以逗號分隔。 |
更多實例
轉換效果-更改兩個屬性
將鼠標懸停在一個div元素上，更改寬度和高度用平穩過渡效果。