【主題二：轉場】單元：

1. CSS轉場
2. 轉場屬性
3. 反向：過場回到原始狀態
4. 可動畫屬性與設定值
5. 備案：轉場是增強
6. 列印轉廠

前言:
CSS屬性值改變時（style change event）幾乎都是即時發生，渲染時間少於１６毫秒。

1. CSS轉場
   CSS轉場（transition）提供讓屬性逐步變化的效果。

2. 轉場屬性
   2-1 transition-property：指定想要有轉場效果的CSS屬性名稱

• 數值 none | all |
• 適用於所有元素以及 :before 與 :after 虛擬元素
• 可用逗號分開，設置多個值
• 如果想設置大多數屬性時間、延遲、步調相同，少數例外，那要確保 all 要放在第一個，以免覆蓋其他設置

2-2 transition-duration

• 設定值是由逗號分開的數值串列（正值）
• 單位是秒（s）或是毫秒（ms），就算是０也要有單位
• 代表從一個狀態到另一個狀態間轉場所花費的時間
• 適用於所有元素以及 :before 與 :after 虛擬元素
• 除非屬性對應的transition-delay設定了正值，否則只要省略transition-duration，就會被視為沒有宣告transition-property，也就不會觸發transitioned事件
• 只要轉場設定的時間總合大於零秒，轉場設定就有作用

2-3 transition-timing-function：控制轉場步調的機制

2-4 transition-delay：延遲轉場時間

2-5 transition：縮寫屬性

• 轉場與元素的一般屬性一併宣告。
• 初始狀態中設置的轉場屬性會在元素狀態改變時發生作用。