CSS transition 過渡 詳解

transition 過渡

IE10、Firefox、Chrome、Opera 支持 transition 屬性。

Safari 需要前綴 -webkit-。

Chrome 25 以及更早版本需要前綴 -webkit-。

IE9 以及更早版本不支持 transition 屬性。

 

過渡屬性

【1】transition-property：

規定應用過渡效果的 CSS 屬性的名稱（當指定的CSS屬性改變時，過渡效果開始），其默認值為 all 。

【2】transition-duration：

規定完成過渡效果需要的時間（單位為 s 或 ms），其默認值為 0s ，意味着如果不指定這個屬性，將不會呈現過渡效果。

【3】transition-timing-function：

規定過渡效果的時間曲線。

默認 ease ：慢速開始，中間變快，慢速結束；相當於 cubic-bezier(0.25, 0.1, 0.25, 1)。

可選 liner：勻速運動；相當於 cubic-bezier(0, 0, 1, 1)。

可選 ease-in：慢速開始；相當於 cubic-bezier(0.42, 0, 1, 1)。

可選 ease-out：慢速結束；相當於 cubic-bezier(0, 0, 0.58, 1)

可選 ease-in-out：慢速開始，慢速結束；相當於 cubic-bezier(0.42, 0, 0.58, 1)

可選 cubic-bezier(n, n, n, n)：在 bezier 函數中自定義 0 ~ 1 之間的數值。

貝塞爾時間曲線詳解。。。

【4】transition-delay：

規定過渡效果的延遲時間，默認為 0s 。

 

復合屬性

在使用復合屬性定義過渡效果時，子屬性之間用空格分隔。

transition: width 2s linear;

transition 屬性可以指定多個值，當指定多個值時，中間用逗號分隔。

transition: width 2s ease-in-out, height 2s ease-in-out;

 

過渡階段

【1】過渡分為兩個階段：前進（forward）和反向（reverse）。

【2】若前進階段還未完成就進入反向階段，則反向階段的初始值為前進階段結束時的瞬時值。

【3】以 :hover 偽類為例，如果在非 hover 狀態下設置了 transition 屬性，相當於設置了反向狀態，此時前進和反向是一致的。

#test {
    width: 100px;
    height: 100px;
    background-color: cyan;
    transition: width 2s, height 2s;
}

#test:hover {
    width: 300px;
    height: 300px;
}

這段代碼意味着，當鼠標懸浮時，將 width 變為 300px，將 height 變為300px，過渡時間為 2s；當鼠標離開時，將 width 變為 100px，將 height 變為 100px，過渡時間為 2s。

但是如果在 hover 狀態下也設置了 transition 屬性，則 hover 狀態下的為前進狀態，非 hover 狀態下的為反向狀態。

#test {
    width: 100px;
    height: 100px;
    background-color: cyan;
    transition: width 2s, height 2s;
}

#test:hover {
    width: 300px;
    height: 300px;
    transition: width 5s, height 5s;
}

這段代碼意味着，當鼠標懸浮時，將 width 變為 300px，將 height 變為300px，過渡時間為 5s；當鼠標離開時，將 width 變為 100px，將 height 變為 100px，過渡時間為 2s。

注意：在 hover 狀態下設置 transition 屬性時，明確哪些屬性需要過渡，而哪些屬性不需要過渡。

 

【4】當子元素和父元素過渡屬性一致：若觸發子元素過渡時，父元素正在過渡，則將父元素過渡的中間態的值作為子元素過渡的初始值；同理，若子元素過渡並未完成就開始父元素的過渡，則將子元素過渡的中間態的值作為父元素過渡的初始值。

#box:hover {
    font-size: 48px;
    transition: font-size 3s;
}

#test:hover {
    font-size: 48px;
    transition: font-size 10s;
}

需要注意的是：當子元素與父元素過渡屬性一致，但是過渡時間不一致的時候，如上面這段代碼，子元素的過渡時間為 10 秒，父元素的過渡時間為 3 秒，當鼠標懸浮在子元素上時，呈現的是子元素的過渡效果，但是父元素的過渡時間也在開始計算；當子元素上過渡進行了 2 秒，此時將鼠標移入父元素，進行父元素的過渡時，這個屬性的過渡時間就只有 1 秒。

 

【5】當需要過渡的屬性初始值為 auto 時，不會進行過渡。

#test {
    width: 100px;
    height: 100px;
    margin: 30px auto;
    background-color: cyan;
}

#test:hover {
    transition: margin-left 5s;
    margin-left: 500px;
}

 

【6】隱式過渡，是指一個屬性的改變引起另一個屬性的改變。

#box {
    width: 300px;
    height: 300px;
    border: 1em solid black;
}

#box:hover {
    font-size: 48px;
    transition: font-size 3s;
}

當 font-size 改變時，border 的寬度也會跟着改變。

Firefox 和 IE 支持隱式過渡。

 

參考：

深入理解 CSS 過渡 transition