CSS transition 過渡 詳解

2022-03-06 23:18:47 字數 2266 閱讀 3512

transition 過渡

ie10、firefox、chrome、opera 支援 transition 屬性。

safari 需要字首 -webkit-。

chrome 25 以及更早版本需要字首 -webkit-。

ie9 以及更早版本不支援 transition 屬性。

過渡屬性

transition-property

:規定應用過渡效果的 css 屬性的名稱(當指定的css屬性改變時,過渡效果開始),其預設值為 all 。

transition-duration

:規定完成過渡效果需要的時間(單位為 s 或 ms),其預設值為 0s ,意味著如果不指定這個屬性,將不會呈現過渡效果。

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 之間的數值。

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

transition-delay

:規定過渡效果的延遲時間,預設為 0s 。

復合屬性

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

transition: width 2s linear;

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

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

過渡階段

過渡分為兩個階段:前進(forward)和反向(reverse)。

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

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

#test #test:hover

這段**意味著,當滑鼠懸浮時,將 width 變為 300px,將 height 變為300px,過渡時間為 2s;當滑鼠離開時,將 width 變為 100px,將 height 變為 100px,過渡時間為 2s。

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

#test #test:hover

這段**意味著,當滑鼠懸浮時,將 width 變為 300px,將 height 變為300px,過渡時間為 5s;當滑鼠離開時,將 width 變為 100px,將 height 變為 100px,過渡時間為 2s。

注意:在 hover 狀態下設定 transition 屬性時,明確哪些屬性需要過渡,而哪些屬性不需要過渡。

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

#box:hover #test:hover

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

當需要過渡的屬性初始值為 auto 時,不會進行過渡。

#test #test:hover

隱式過渡,是指乙個屬性的改變引起另乙個屬性的改變。

#box #box:hover

當 font-size 改變時,border 的寬度也會跟著改變。

firefox 和 ie 支援隱式過渡。

參考:深入理解 css 過渡 transition

CSS transition 過渡效果

div div hover 滑鼠經過盒子,變換高度 寬度 width 元素的要過渡的屬性 0.5s 花費時間 easy in 加速 0s 何時開始 transition property 過渡用在元素的什麼屬性上 transition delay 花費時間 s或者ms transition timi...

css transition屬性 過渡

transition 有四個屬性 屬性名 描述transition property 指定進行transition的屬性,預設值為all,還有none 沒有屬性獲得過渡效果 property 應用與過渡效果的css屬性名稱列表,用逗號分隔 transition duration 效果需要指定多少秒或...

css transition屬性詳解

具體的屬性詳解可參考 四個屬性 transition transition property transition duration transition timing function transition delay transition property 檢索或設定物件中的參與過渡的屬性 tr...