CSS3 教程
CSS3 transition-property屬性
實例
將鼠標(biāo)懸停在一個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;}
運行代碼 ?
在此頁底部有更多的例子。
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| 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屬性的變化）。
提示:一個轉(zhuǎn)場效果，通常會出現(xiàn)在當(dāng)用戶將鼠標(biāo)懸停在一個元素上時。
注意：始終指定transition-duration屬性，否則持續(xù)時間為0，transition不會有任何效果。
| 默認(rèn)值： | all |
|---|---|
| 繼承： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.transitionProperty="width,height" |
語法
transition-property: none|all|
property;
| 值 | 描述 |
|---|---|
| none | 沒有屬性會獲得過渡效果。 |
| all | 所有屬性都將獲得過渡效果。 |
| property | 定義應(yīng)用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。 |
更多實例
轉(zhuǎn)換效果 - 更改兩個屬性
將鼠標(biāo)懸停在一個div元素上，更改寬度和高度用平穩(wěn)過渡效果。