CSS transition 屬性
示例
將滑鼠懸停在 <div> 元素上，以將寬度從 100px 逐漸變為 300px
div {
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
transition 屬性是以下屬性的簡寫：
注意： 始終指定 transition-duration 屬性，否則持續時間為 0s，過渡將無效。
| 預設值 | all 0s ease 0s |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.transition="all 2s" 嘗試一下 |
瀏覽器支援
表格中的數字表示該屬性的第一個完整支援的瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| transition | 26 | 12 | 16 | 9 | 12.1 |
CSS 語法
transition: property duration timing-function delay|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| transition-property | 指定過渡效果的 CSS 屬性名稱 |
| transition-duration | 定義過渡效果完成所需的秒數或毫秒數 |
| transition-timing-function | 指定過渡效果的速度曲線 |
| transition-delay | 定義過渡效果何時開始 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
當 <input type="text"> 獲得焦點時，將寬度從 100px 逐漸變為 250px
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 過渡
HTML DOM 參考： transition property
