00、CSS動畫

CSS 動畫就是由一種狀態（CSS樣式），過渡到另一中狀態（CSS樣式）的動態過程，CSS中提供了兩種動畫實現方式：transition、animation。

對比	transition動畫	animation動畫
定義	基於CSS屬性變化的簡單過渡動畫	基於關鍵幀`@keyframes`實現更復雜的動畫
複用	只能執行一次，不可重複執行，複用不便	可多次執行，複用方便
執行方式	頁面載入不會預設執行，須觸發執行	可直接執行、可控制
動畫事件	無，只能預估動畫時間，用定時器`setTimeout`模擬	支援監聽事件，如動畫開始、結束
動畫幀	只有初始幀（當前樣式）、結束幀（觸發動畫時的樣式）	支援任意多幀動畫設定
五星好評	靈活簡單	功能豐富

01、transition過渡動畫

transition 過渡動畫是針對CSS樣式的變化，進行過渡，如width、opacity、color改變的過渡，可以實現CSS樣式的平滑動態過渡動畫效果。

transition 動畫本身並不會主動執行，須通過其他方式觸發，動畫屬性變化才會觸發執行。常用一些偽類觸發：:hover、:focus、:active（滑鼠按下啟用）、:target（錨點元素id）、:checked，或者JS控制CSS樣式來觸發動畫執行。

transition過渡	描述	範例
transition	過渡動畫的簡寫屬性，包括下面這些小弟	（transition /trænˈzɪʃ(ə)n/ 過渡）
transition-property	指定過渡動畫的CSS屬性名，多個`,`分割，預設`all`都生效	`transition-property: width;`
transition-duration	動畫時長，預設0，單位s、ms，*必備	`transition-duration: 1s;`
transition-delay	動畫延時時長，延時執行動畫	`transition-delay: 1s;`
*-timing-function	指定過渡動畫執行緩動曲線函數，詳見後面`animation`章節	`transition-timing-function: linear;`