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 : 200ms 50ms ease-in;

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

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

Daco Note