CSS3-Animation總結

常常忘記參數的順序及含義，作個總結方便往後查看

語法結構(簡寫)

animation: name duration timing-function delay iteration-count direction fill-mode;

舉例：

.dom {
    animation: wang 3s linear 1s infinite alternate forwards ;
}

含義：
動畫名稱：wang
動畫持續時間：3 秒
動畫速度：勻速
動畫延遲：1 秒
動畫播放次數：無限次播放
動畫是否反向播放：是反向播放
動畫播放先後是否可見：動畫結束保留在最後一幀

<!-- more -->

值	描述
animation-name	規定須要綁定到選擇器的 keyframe 名稱。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始以前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

參數含義

1. animation-name

規定須要綁定到選擇器的 keyframe 名稱。

語法：

animation-name: keyframename |none;

值	描述
keyframename	規定須要綁定到選擇器的 keyframe 的名稱。
none	規定無動畫效果（可用於覆蓋來自級聯的動畫）。

2. animation-duration

規定完成動畫所花費的時間，以秒或毫秒計。

語法：

animation-duration: time;

值	描述
time	規定完成動畫所花費的時間。默認值是 0，意味着沒有動畫效果。

3. animation-timing-function

規定動畫的速度曲線。

語法：

animation-timing-function: value;

animation-timing-function 使用名爲三次貝塞爾（Cubic Bezier）函數的數學函數，來生成速度曲線。您可以在該函數中使用本身的值，也能夠預約義的值：

值	描述	測試
linear	動畫從頭至尾的速度是相同的。	測試
ease	默認。動畫以低速開始，而後加快，在結束前變慢。	測試
ease-in	動畫以低速開始。	測試
ease-out	動畫以低速結束。	測試
ease-in-out	動畫以低速開始和結束。	測試
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中本身的值。可能的值是從 0 到 1 的數值。

4. animation-delay

規定在動畫開始以前的延遲。

語法：

animation-delay: time ;

值	描述	測試
time	可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0。	測試

5. animation-iteration-count

規定動畫應該播放的次數。

語法：

animation-iteration-count: n |infinite;

值	描述	測試
n	定義動畫播放次數的數值。	測試
infinite	規定動畫應該無限次播放。	測試

6. animation-direction

規定是否應該輪流反向播放動畫。

語法：

animation-direction: normal|alternate;

值	描述	測試
normal	默認值。動畫應該正常播放。	測試
alternate	動畫應該輪流反向播放。	測試

7. animation-fill-mode

規定動畫在播放以前或以後，其動畫效果是否可見。

語法：

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改變默認行爲。
forwards	當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards	在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。
both	向前和向後填充模式都被應用。