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;}


在此頁底部有更多的例子。

流覽器支持

表格中的數字表示支持該屬性的第一個流覽器版本號。

緊跟在 -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 屬性名稱列表，列表以逗號分隔。

Examples

更多實例


將滑鼠懸停在一個div元素上，更改寬度和高度用平穩過渡效果。