例
將鼠標懸停在<div>元素，並用流暢的過渡效果改變寬度：
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} 試一試» 更多"Try it Yourself"下面的例子。
定義和用法
過渡屬性屬性指定CSS屬性的名稱過渡效果是(the transition effect will start when the specified CSS property changes) 。
Tip:通常可以發生時的過渡效果，用戶將鼠標懸停在某個元素。
Note:始終指定過渡時間屬性，否則持續時間為0，並過渡不會有任何影響。
| 默認值： | all |
|---|---|
| 遺傳： | no |
| 動畫： | no. Read about animatable |
| 版： | CSS3 |
| JavaScript語法： | object .style.transitionProperty="width,height" Try it |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次是-webkit-，-moz-數字或-O-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -O- |
CSS語法
transition-property: none|all|property|initial|inherit;屬性值
| 值 | 描述 |
|---|---|
| none | 無屬性將得到一個過渡效果 |
| all | 默認值。 所有屬性會得到一個過渡效果 |
| property | 定義一個逗號分隔的CSS屬性名過渡效果是一覽 |
| initial | 將此屬性設置為默認值。 閱讀關於初始 |
| inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
更多示例
例
將鼠標懸停在<div>元素，並更改寬度和高度的平滑過渡效果：
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} 試一試» 相關頁面
CSS教程： CSS3過渡
HTML DOM參考： transitionProperty property