CSS3 過渡

CSS3 過渡功能允許 CSS 屬性值的更改在指定的持續時間內平滑發生。

瞭解 CSS3 過渡

通常，當 CSS 屬性的值發生更改時，渲染結果會立即更新。一個常見的例子是在滑鼠懸停時更改按鈕的背景顏色。在正常情況下，當你將游標放在按鈕上時，按鈕的背景顏色會立即從舊屬性值更改為新屬性值。

CSS3 引入了一種新的過渡功能，允許你隨著時間的推移平滑地將屬性從舊值動畫到新值。以下示例將向你展示如何在滑鼠懸停時為 HTML 按鈕設定 background-color 動畫。

button {
    background: #fd7c2a;
    /* For Safari 3.0+ */
    -webkit-transition-property: background;
    -webkit-transition-duration: 2s;
    /* Standard syntax */
    transition-property: background;
    transition-duration: 2s;
}
button:hover {
    background: #3cc16e;
}

你必須指定至少兩個屬性 transition-property 和 transition-duration （大於 0）才能進行轉換。但是，所有其他轉換屬性都是可選的，因為它們的預設值不會阻止轉換髮生。

CSS 屬性的名稱要使用的應用過渡效果-為了使過渡發生時，你必須指定至少兩個 transition-property 使用 CSS 屬性，以及過渡效果的持續時間（大於 0） transition-duration 的 CSS 屬性。但是，所有其他轉換屬性都是可選的，因為它們的預設值不會阻止轉換髮生。

注意： 並非所有 CSS 屬性都是​可動畫的。通常，任何接受數字、長度、百分比或顏色值的 CSS 屬性都是​可動畫的。

執行多個轉換

每個轉換屬性可以使用多個值，以逗號分隔，這提供了使用不同設定一次定義多個轉換的簡便方法。

button {
    background: #fd7c2a;
    border: 3px solid #dc5801;
    /* For Safari 3.0+ */
    -webkit-transition-property: background, border;
    -webkit-transition-duration: 1s, 2s;
    /* Standard syntax */
    transition-property: background, border;
    transition-duration: 1s, 2s;
}
button:hover {
    background: #3cc16e;
    border-color: #288049;
}

過渡速記屬性

應用轉換時需要考慮許多屬性。但是，也可以在一個屬性中指定所有過渡屬性以縮短程式碼。

transition 屬性是用於設定所有單獨的過渡特性的縮寫屬性（即 transition-property ， transition-duration ， transition-timing-function 和 transition-delay）。

使用此屬性時，嚴格按照值的順序是非常重要。

button {
    background: #fd7c2a;
    -webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */
    transition: background 2s ease-in 0s; /* Standard syntax */
}
button:hover {
    background: #3cc16e;
}

注意： 如果缺少或未指定任何值，則將使用該屬性的預設值。這意味著，如果 transition-duration 缺少屬性值，則不會發生轉換，因為其預設值為 0。

CSS3 過渡屬性

下表提供了所有過渡屬性的簡要概述：