關鍵影格動畫。

以下將會一步一步將動畫設定的順序寫出來。

1. @keyframe

首先我們要先設定整個動畫進行的流程。

@keyframes test {
  from {
    border-radius: 10%;
  }
  to {
    border-radius: 50%;
  }
}

整個動畫會以一個@keyframe包裹住，接著裡面用from、to代表著整段動畫的開頭到結尾，中間的影格將會由程式自動演算出來。

另外我們如果要制訂更細的動畫展現方式，也可以用0%-100%的撰寫模式，範例如下：

@keyframes test {
  0% {
    border-radius: 10%;
  }
  25% {
    border-radius: 25%;
  }
  50% {
    border-radius: 50%;
  }
}

2. animation屬性

設定好動畫後，接著我們就要將動畫套用在元素上，並為它添加上各種不同的屬性，以下的屬性也可囊括在一個animation屬性內。

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

• animation-name：動畫名稱。
• animation-duration：動畫時間，預設值為 0，單位是 s 或 ms。
• animation-delay：動畫延遲播放時間，預設值為 0，單位是 s 或 ms。
• animation-iteration-count：動畫播放次數，預設值為 1。
• animation-timing-function：動畫加速度函式，預設值為 ease。
• animation-direction：動畫播放方向，預設值為 normal。
• animation-fill-mode：動畫播放前後，預設值為 none。
• animation-play-state：動畫播放或暫停狀態，預設值為 running。

animation-name：

以下兩種方式皆可代表動畫名稱。

@keyframes test {
  ...;
}
@keyframes "test" {
  ...;
}

animation-duration：

因動畫的預設值為 0，故此屬性未設定的情況，動畫將不會進行播放。

animation-delay：

可設定正值或負值，如設定的為負值，將會像快轉的方式，從指定秒數的影格開始播放動畫。

animation-iteration-count：

播放次數可設定為infinite，讓動畫無限次播放。

animation-timing-function：

有許多種加速度函式，能讓動畫表現得更加順暢。

• linear：沒有加減速，動畫會呈現線性播放。
• ease、ease-in、ease-out、ease-in-out：分別會在不同區段加減速。
• step-start、step-end：將不會有中間演算的影格，會按照順序逐格播放。
• steps(int, start || end)：隨著int的值越大，演算的影格也會越多。
• cubic=bezier(0, 0, 0, 0)：貝茲曲線。

animation-direction：

調整動畫播放的方向順序，以下以0%、50%、100%為例。

• normal：正常播放，預設值，0%到100%。
• reverse：反向播放，100%到0%。
• alternate：正常與反向輪流播放，先是0%到100%，接著100%到0%，接著0%到100%，以此類推，如播放次數只設定一次，即為0%到100%。
• alternate-reverse：alternate的相反，先是100%到0%，接著0%到100%，接著100%到0%，以此類推，如播放次數只設定一次，即為100%到0%。

animation-fill-mode：

• none：預設值，結束後返回原始狀態。
• forwards：動畫結束後，保持在最後一個影格的狀態。
• backwards：動畫結束後，保持在第一個影格的狀態。
• both：依據動畫的次數或播放方向，保持在第一個影格或最後一個影格狀態，相當實用。

animation-play-state：

透過下述兩個特性，可以輕易實現游標移動到區塊才進行動畫的效果。

• running：預設值，動畫運行。
• paused：動畫暫停。