CSS: 轉場動畫(transition)

transition可以為樣式在改變時添加動畫，比如hover時可能會改變字體顏色、多條border等等，加入transition可以讓這個改變更加流暢。

transition-property

要轉換的目標css屬性，比如color、border等等，也可以用all針對所有改變的屬性作出動畫。

a {
	transition-property: all;
}

transition-duration

設定動畫要持續多久

a {
	transition-duration: 0.5s
}

transition-timing-function

動畫呈現函式，可以自訂動畫呈現的效果，但這方面比較複雜，所以CSS也有提供幾個事先寫好的函式，更多可以參考官方文件

• linear

• ease

• ease-in

• ease-out

• ease-in-out

• step-start

• step-end

關於動畫呈現效果我之後會補上文章

transition-delay

設定延遲幾秒才出現動畫

a {
	transition-delay:250ms;
}

transition

上述的語法都可以簡寫成transition一個屬性

a {
	transition: <property> <duration> <timing-function> <delay>;
}

範例

[註] transition要放在a上，不能放在hover上，否則滑鼠游標離開a時會沒有動畫。