CSS 過渡
CSS 過渡
CSS 過渡允許您在給定的持續時間內平滑地更改屬性值。
將滑鼠懸停在下面的元素上，檢視 CSS 過渡效果
CSS
在本章中，您將學習以下屬性
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
過渡的瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
如何使用 CSS 過渡？
要建立過渡效果，您必須指定兩件事
- 您要新增效果的 CSS 屬性
- 效果的持續時間
注意： 如果未指定持續時間部分，則過渡將無效，因為預設值為 0。
以下示例顯示了一個 100px * 100px 的紅色 <div> 元素。該 <div> 元素還為 width 屬性指定了過渡效果，持續時間為 2 秒
示例
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
當指定的 CSS 屬性（width）值更改時，過渡效果將開始。
現在，讓我們為使用者滑鼠懸停在 <div> 元素上時指定 width 屬性的新值
請注意，當滑鼠移出元素時，它會逐漸恢復到原始樣式。
更改多個屬性值
以下示例為 width 和 height 屬性添加了過渡效果，width 的持續時間為 2 秒，height 的持續時間為 4 秒
指定過渡的速度曲線
transition-timing-function 屬性指定了過渡效果的速度曲線。
transition-timing-function 屬性可以具有以下值
ease- 指定具有緩慢開始、然後快速、然後緩慢結束的過渡效果（這是預設值）linear- 指定從開始到結束速度相同的過渡效果ease-in- 指定具有緩慢開始的過渡效果ease-out- 指定具有緩慢結束的過渡效果ease-in-out- 指定具有緩慢開始和結束的過渡效果cubic-bezier(n,n,n,n)- 允許您在三次貝塞爾函式中定義自己的值
以下示例顯示了一些可用的速度曲線
示例
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
自己動手試一試 »
延遲過渡效果
transition-delay 屬性指定過渡效果的延遲（以秒為單位）。
以下示例在開始前有 1 秒的延遲
過渡 + 變換
以下示例為變換添加了過渡效果
更多過渡示例
CSS 過渡屬性可以逐個指定，如下所示
示例
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
自己動手試一試 »
或使用速記屬性 transition
CSS 過渡屬性
下表列出了所有 CSS 過渡屬性
| 屬性 | 描述 |
|---|---|
| transition | 將所有四個過渡屬性合併為一個屬性的速記屬性 |
| transition-delay | 指定過渡效果的延遲（以秒為單位） |
| transition-duration | 指定過渡效果完成所需的秒數或毫秒數 |
| transition-property | 指定過渡效果的 CSS 屬性名稱 |
| transition-timing-function | 指定過渡效果的速度曲線 |
