一、過渡
過渡（transition)是CSS3中具有顛覆性的特征之一，可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
在CSS3里使用transition可以實現補間動畫（過渡效果），並且當前元素只要有“屬性”發生變化時即存在兩種狀態(我們用A和B代指），就可以實現平滑的過渡，為了方便演示采用hover切換兩種狀態，但是並不僅僅局限於hover狀態來實現過渡。
語法格式：
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;
如果有多組屬性變化，還是用逗號隔開。
屬性：
| 描述 | CSS | |
|---|---|---|
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規定過渡效果何時開始。默認是 0。 | 3 |
二、設置過渡屬性
使用該屬性可以指定某個元素的過渡動畫的 CSS屬性名稱。
語法格式：
transition-property:none | all | [<ident>][,<ident>] *;
-
- none：表示沒有元素；
- all：默認值，表中針對所有的元素，包括 :before 和 :after 元素；
- ident：指定 CSS 屬性列表，可以包括所有的屬性，包括新添加的 CSS3 的屬性
三、設置過渡時間
使用該屬性來定義轉換動畫的時間長度。
語法格式：
transition-duration: <time> [,<time>] * ;
-
- 初始值為0，適用於所有元素，以及 :before 和 :after 偽元素；
- 單位是 秒 s 比如 0.5s 這個s單位必須寫
四、設置過渡動畫類型(運動曲線)
該屬性用來定義過渡動畫的類型。
語法格式：
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubicbezier{<number>,<number>,<number>,<number>}
-
- ease：平滑過渡，等同於 cubic-bezier(0.25,0.10.25,0.1) 函數，即 立方貝塞爾。（默認值）
- linear：線性過渡，等同於 cubic-bezier(0.0,0.0,1.0,1.0) 函數
- ease-in：由慢到快，等同於 cubic-bezier(0.42,0.0,1.0,1.0) 函數
- ease-out：由快到慢，等同於 cubic-bezier(0,0,0.58,1.0) 函數
- ease-in-out：由慢到快再到慢，等同於 cubic-bezier(0.42,0.0,0.58,1.0) 函數
- cubic-bezier：特殊的 立方貝塞爾曲線效果。
運動曲線示意圖：
五、設置延遲時間
該屬性用來定義開啟過渡動畫的延遲時間。
語法格式：
transition-delay:<time> [,<time>] *;
-
- 初始值為0，適用於所有元素，以及 :before 和 :after 偽元素。
- 設置時間可以為正整數，負整數和零，非零的時候必須設置單位是 s(秒) 或者 ms（毫秒）
- 時間為負數的時候，過渡的動畫會從該時間點開始顯示，之前的動作被截斷；
- 時間為正數的時候，過渡的動畫會延遲觸發；
六、設置觸發方式
CSS3 動畫一般通過鼠標事件或狀態定義動畫，如 CSS偽類和 JavaScript 事件。
CSS 動態偽類
| 動態偽類 | 作用元素 | 說明 |
| :link | 只有鏈接 | 未訪問的連接 |
| :visited | 只有鏈接 | 訪問過的鏈接 |
| :hover | 所有元素 | 鼠標經過的元素 |
| :active | 所有元素 | 鼠標點擊元素 |
| :focus | 所有可被選中的元素 | 元素被選中 |
JavaScript 事件包括：click、focus、mousemove、mouseover、mouseout 等事件。
還有另外一種方法是 使用 CSS3 媒體查詢來實現過渡動畫。