前言

在昨天的文章中我們詳細了介紹 何謂 CSS Animation，而今天我們就來了解 Animation 內有哪些屬性可以運用吧！

Animation 基礎語法

@keyframe

關鍵幀(keyframes) 是用來指定動畫運作期間個時間點的動畫屬性值。
@keyframes 使用方法如下：

@keyframes <keyfeames-name>{<rule-list>}

• keyframes-name: 使用者自定義動畫名稱，普通文字與字串符會被默認同一規則名稱，但大寫與小寫則會視為不同規則名稱，另外使用者無法使用 none 或 initial 這個關鍵字。
  以下為 keyframe-name 範例：

/* 普通文字或字串符皆被視為同一規則名稱 */
@keyframes foo { ... }
@keyframes "foo" { ... }

/* 大寫與小寫為不同規則名稱 */
@keyframes foo { ... }
@keyframes FOO { ... }

/* 使用者無法直接使用 inital 或 none 兩個關鍵字 */
@keyframes initial { ... }
@keyframes None { ... }

/* 但若是使用字串符的 "inital" 或 "none" 則可以運行 */
@keyframes "initial" { ... }
@keyframes "None" { ... }

• keyframes-block: rule-list 內允許 keyframes-block 所定義的規則，在 keyframe-block 中你可以放入任何 CSS 除了有關於 Aniamtion 的屬性。
  but!，人生最重要的這個 but，此規則 可以 使用 animation-time-funciton 屬性並給予其特殊定義。不過由於其內的 CSS 屬性不參與 CSS cascade 所以即便在 keyframes-block 內的屬性上使用 !important 也不會有任何作用。

• keyframes-selector: 指定關鍵幀的動畫持續時間，可由百分比 100% 0% 或關鍵字 from to，所組成。
  關鍵字 from 等於 百分比 0%， 即起始值、關鍵字 to 等於 百分比 100%，即結束值。小於 0% 或大於 100% 都會被視為無效數值。

  注意！
  百分比單位 必須 有 % 單位符號，若直接使用 0，是無效的。

  若使用者未指定起始值，則起始值會自動從 0% 開始計算，同理，若使用者沒有指定結束值，結束值將會自動設定 100% 。

animation-name

如前面所敘述。
另外要提到的是，若有重複的 Animation 屬性在不同的 animation-name ，則會由後向前覆蓋。

• none
  特殊關鍵字，可用於停用動畫而不需要透過改變 CSS 選擇器，或是停用 cascade 中的動畫。
• keyframes-name
  標示動畫規則的名稱。

.box {
  animation-name: slide-right;
}

@keyframes slide-right {
    <rule-list>
}

animation-duration

定義單個動畫週期的持續時間。

若時間值為 0 ，則對於動畫 keyframes 將會無效，但動畫本身仍會作用，但只會發生在一瞬間。更具體的來說，時間值 0 確實是有觸發整個動畫的開始與結束，只是使用者肉眼無法所見。

而負數的值對於 time 則會無效。

animation-timing-function

設定動畫在關鍵幀中加速度的函式，此定義了每一個動畫週期的節奏感，可做出握們在前面 動畫12法則中 漸快與漸慢（Slow in and slow out） 效果，可以為一個或多個值。

• linear
  無任何加速度變化。
  
  linear
• ease、ease-in、ease-out、ease-in-out
  加速度或減速度。
  
  ease
• step
  按照關鍵幀數，一步一步 的動作。
  
  step-start

有關於 timing-function 的定義，會在後面篇章有更詳細的介紹，敬請大家期待。

animation-iteration-count

定義動畫播放次數，初始值為 1，表示動畫會從頭到尾播放 一次，通常此屬性會與 animation-direction 和 alternate 屬性一起使用。讓動畫能夠順暢的在交替循環反向播放。

• infinite
  無限次循環播放
• < number >
  使用者自訂播放次數，若該數值不是整數，則動畫會在最後一個循環中途結束。若數值為負數雜無效。
  數值 0 是有效的，效果類似animation-duration 的數值 0。
  
  播放次數：２

animation-direction

定義動畫播放方向是由正向或反向起始播放。反向播放時 timing functions 也會相反。舉例來說：正向播放時為 ease-in，設定反向播放的話則為 ease-out。

• normal
  按照指定方向正向播放方向。
  
  正向播放
• reverse
  按照動畫方向反向播放。
  
• alternate
  奇數次數以指定方向正向播放並且循環，偶數次數以反向播放並且循環。
  
• alternate-reverse
  奇數次數以反向播放並且循環，偶數次數以沿著正常方向正向播放並且循環。
  

animation-play-state

並億動畫是否正常播放或停止運行。

• running
  動畫正常運行。
• paused
  動畫暫停運行。雖然畫面上為靜止狀態，但 keyframes 仍然作用於元素中。當取消 paused (及重新 running) 動畫將會從被中斷處開始運行。

animation-delay

定義動畫起始時間，即動畫應用到元素上到動畫開始時的時間長度。
0s 為預設值。代表動畫應用到元素後立即執行動作。

若時間長度設定負數，則他會從動畫中間開始進行播放，此時效果看起來像是畫面還沒選染完成便已經開始運作動畫了。

animation-fill-mode

定義當動畫不播放時(在開始前，結束後以及兩者)的元素狀態。此屬性無論是在動畫播放前或後，都不會引響到元素原始 CSS。

• none
  預設值，動畫在播放完畢後必定回到最初狀態。
  
• forwards
  動畫結束後保持在最後一個關鍵幀的屬性值。
  當 animation-iteration-count >0 時，其應用的值為動畫最後一次所使用的屬性，當 animation-iteration-count =0 時，其應用的值為第一次開始的屬性。
  
• backwards
  動畫結束後動畫結束後保持在第一個關鍵幀的屬性值(取決於 animation-delay)
  效果和 none 差不多。
• both
  動畫將遵循 forwards 與 backwards 規則。

讀到這邊各位有了解 Animation 每一個屬性的運用了嗎？ Animation 能套用的屬性實在是非常多，有時候不太了解的話還是會需要反覆去查詢。

而明天我們會來介紹一下 CSS Animation 事件機制，以及不免俗的帶著大家做一些簡單的小動畫。看來明天的文章也會相當精彩，大家別錯過囉～

我們明天見！ㄅㄅ！

參考資料

• W3.org - Animations
• MDN - animation
• 前端新手村 Animations(上)(下)
• oxxostudio - 完整解析 CSS 動畫 ( CSS Animation )