CSS 過渡

CSS 過渡

CSS 過渡允許您在給定的時間內平滑地改變屬性值。

請把鼠標移動到這個元素上，來查看 CSS 過渡效果：

CSS

在本章中，您將學習如下屬性：

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

對過渡的瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

屬性 Chrome IE Firefox Safari Opera
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）值發生變化時，將開始過渡效果。

現在，讓我們為 width 屬性指定一個鼠標懸停在 <div> 元素上時的新值：

實例

div:hover {
  width: 300px;
}

親自試一試

請注意，當光標從元素上移開時，它將逐漸變回其原始樣式。

改變若干屬性值

下面的例子為 width 和 height 屬性都添加了過渡效果，width 是 2 秒，height 是 4 秒：

實例

div {
  transition: width 2s, height 4s;
}

親自試一試

指定過渡的速度曲線

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 秒的延遲：

實例

div {
  transition-delay: 1s;
}

親自試一試

過渡 + 轉換

下例為轉換添加過渡效果：

實例

div {
  transition: width 2s, height 2s, transform 2s;
}

親自試一試

更多過渡實例

您可以可以一一指定 CSS 過渡屬性，如下所示：

實例

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

親自試一試

或使用簡寫的 transition 屬性：

實例

div {
  transition: width 2s linear 1s;
}

親自試一試

CSS 過渡屬性

下表列出了所有 CSS 過渡屬性：

屬性 描述
transition 簡寫屬性，用于將四個過渡屬性設置為單一屬性。
transition-delay 規定過渡效果的延遲（以秒計）。
transition-duration 規定過渡效果要持續多少秒或毫秒。
transition-property 規定過渡效果所針對的 CSS 屬性的名稱。
transition-timing-function 規定過渡效果的速度曲線。