CSS transition-property 屬性
示例
將滑鼠懸停在 <div> 元素上，並用平滑的過渡效果改變寬度
div {
transition-property: width;
}
div:hover {
width: 300px;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
transition-property 屬性指定了過渡效果的目標 CSS 屬性的名稱（當指定的 CSS 屬性發生變化時，過渡效果將開始）。
提示： 當用戶將滑鼠懸停在元素上時，通常會發生過渡效果。
注意： 始終要指定 transition-duration 屬性，否則持續時間為 0，過渡將不起作用。
| 預設值 | all |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.transitionProperty="width,height" 試一試 |
瀏覽器支援
表格中的數字表示該屬性的第一個完整支援的瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| transition-property | 26 | 12 | 16 | 9 | 12.1 |
CSS 語法
transition-property: none|all|property|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| none | 不會有任何屬性獲得過渡效果 |
| all | 預設值。所有屬性都會獲得過渡效果 |
| property | 定義一個逗號分隔的 CSS 屬性名稱列表，過渡效果將應用於這些屬性 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
將滑鼠懸停在 <div> 元素上，並用平滑的過渡效果改變寬度和高度
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 過渡
HTML DOM 參考： transitionProperty 屬性
