transition、animation我的理解分別是：過渡、動畫。因為兩者的功能較為接近，所以在這我主要整理transition和animation的使用方法。

Transition

1.定義和用法

transition的使用在於讓元素的變化有一個過渡的過程，過渡效果執行完畢之後，預設會還原到原始狀態，即可以指定狀態變化所需要的時間。transition是一個簡寫屬性，用於設定四個過渡屬性：

transition-property：規定設定過渡效果的css屬性名稱

none 沒有屬性會獲得過渡效果all 所有屬性都獲得過渡效果property 定義應用過渡效果的css屬性名稱列表，列表以逗號分隔

transition-duration：規定完成過渡效果需要多少秒或毫秒必須設定，否則時長為0,則不產生過渡效果。

transition-timing-function：規定過渡效果的速度曲線，預設值為：ease

linear 勻速（等於 cubic-bezier(0,0,1,1)）

ease 先加速後減速（等於 cubic-bezier(0.25,0.1,0.25,1)）

ease-in 加速（等於 cubic-bezier(0.42,0,1,1)）

ease-out 減速（等於 cubic-bezier(0,0,0.58,1)）

ease-in-out 等同類似於ease（等於 cubic-bezier(0.42,0,0.58,1)）

cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。

transition-delay規定過渡效果何時開始，即過渡效果開始前需等待的時間，預設值：0

2.transition的侷限性

需要事件觸發基本結合滑過、點選、焦點事件使用，無法在網頁載入時自動發生（除非結合js）

一次性，不能重複發生，除非一再觸發只能定義開始和結束狀態，不能定義中間狀態，即只有兩個狀態

Animation

1.定義和用法

animation與transition的效果很類似，但是animation可以很好的避免上述所說的transition的侷限性。

animation：是一個簡寫屬性，用於設定以下幾個動畫屬性：

animation- name：為 @keyframes（關鍵幀） 動畫規定一個名稱

none 規定無動畫效果（可用於覆蓋來自級聯的動畫）keyframename規定需要繫結到選擇器的keyframe的名稱

animation -duration：規定完成動畫所花費的時間必須設定，否則時長為0,則沒有動畫效果

animation -timing-function：規定動畫效果的速度曲線，預設值為：easelinear 勻速（等於 cubic-bezier(0,0,1,1)）

ease 先加速後減速（等於 cubic-bezier(0.25,0.1,0.25,1)）

ease-in 加速（等於 cubic-bezier(0.42,0,1,1)）

ease-out 減速（等於 cubic-bezier(0,0,0.58,1)）

ease-in-out 等同類似於ease（等於 cubic-bezier(0.42,0,0.58,1)）

cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。

animation -delay：規定動畫效果何時開始

animation –iteration-count：定義動畫的播放次數n 定義動畫播放的數值infinite 規定動畫應該無限次播放

animation –direction：定義是否輪流反向播放動畫normal 預設值。

動畫正常播放alternate動畫應該輪流反向播放

animation –play-state：（目前支援該屬性的瀏覽器較少）檢索或設定物件動畫的狀態running 預設值。規定動畫正在播放paused規定動畫已暫停

animation –fill-mode：（目前支援該屬性的瀏覽器較少）檢索或設定物件動畫時間之外的狀態none 預設值。不設定物件動畫之外的狀態（不改變預設行為）

forwards設定物件狀態為動畫結束時的狀態（在最後一個關鍵幀中定義）

backwards 設定物件狀態為動畫開始時的狀態（在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。）

both設定物件狀態為動畫結束或開始的狀態（向前和向後填充模式都被應用）