CSS: transition 轉場/過場

transition 最常使用在滑鼠移到物件上時 (hover) 觸發的變化。

▼比如說如下例子,當滑鼠移上去時人物會「立即」以Y軸為軸心旋轉45度。


 

▼如果我們加上過場屬性,它就會以漸進式的動畫呈現。

 

這裡有一個要注意的是,在沒有 :hover 的選擇器也要設定 transition-duration 這樣滑鼠移開時,才不會瞬間跳回滑鼠還未滑上去的狀態,看起來有點突兀。(這一段如果看不懂,看完整篇再回來看就會懂)

.rotatey45ani{
transition:200ms;
}

.rotatey45ani:hover{
transform:perspective(500px) rotateY(45deg);
transition:1s;
}

 

transition-property 套用過場的屬性

用來指定有哪些屬性要套用過場效果,初始值是 all 也就是所有屬性都套用。

也可以一一列出要過場的屬性 eg:

transition- property: color, border, transform, opacity, width, padding;
transition-duration:1s;

或是先寫all 再列出特別設定秒數的屬性,並提供相對應秒數

transition-property: all, color, transform;
transition-duration:1s, 2s, 3s;

以上 transition-duration 是轉場的效果持續時間(後面會提到),除了指定 color 屬性轉場時間持續2秒,以及 transform 屬性轉場時間持續3秒以外,其他所有的屬性都持續轉場時間1秒。

如果某個屬性不想有轉場效果,要直接跳到指定屬性變化,就把持續時間設為 0s 即可。

transition-property:none

複寫掉所有轉場效果
none 只能當作唯一值,不能當作部分值。

轉場結束後會觸發 transitionend 事件

 

transition-duration 過場持續時間

初始值 0s ,一定要是正值。

如果屬性值大於週期值,瀏覽器會重複宣告週期值。

eg:

transition-property:color, border, transform, opacity, width, padding;
transform-duration: 100ms, 200ms;

以上則基數屬性使用第一個週期值,偶數屬性使用第二個週期值

 

transition-timing-function 過場時脈

初始值是 ease

linear 是線性,沒有緩衝、 ease-in 是先慢後快、ease-out 是先快後慢、ease-in-out 就是緩出緩進。

其他還有 step-end, step-star, step(n, end), step(n, out),這幾個不常用,先用以下草圖表示:

 

transition-delay 延遲多少時間才開始過場動作

初始值: 0s,可以是負值,如果 transition-delay 值小於 transition-duration 則會從一開始就轉場而且是從中段開始。

transition-delay:0s 轉場立即開始。

transition-property: color, border, transform, opacity;
transition-duration:200ms;
transition-timing-function:linear;
transition-delay:0s, 200ms;

個別設定延遲時間

對一連串的屬性設定 transform-delay 和transition-duration 一樣,如果屬性個數多於transition-delay 個數則會重複套用 transition-delay;如果屬性數較少,則多出來的transition-delay 會被忽略。

 

transition 縮寫

我想我們最需要的是這個,一個一個宣告未免也太長篇大論。

transition: 屬性 持續 時脈 延遲;
以上用空格隔開即可
eg:

transition : transform 200ms ease-in 50ms;

如果省略屬性 (transition-property) 則預設值為 all 如果只有一個時間值 則會視為是 transition-duration 如果有兩個時間值,則第一個永遠是 transition-duration 第二個是 transition-delay,第三個值時脈(transition-timing-function) 如果沒宣告則預設值是 ease。

transition 唯一必須的值是 transition-duration ,也就是轉場持續時間,我們也常常只設定這個值。

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…