範例請到：http://ashareaday.wcc.tw/#2013-10-18

和其他屬性一樣，animation有許多屬性可以設定，當然也可以用一個animation涵蓋全部，以下幾張會分別介紹以下屬性的用途。

[ animation-name ]：設置物件所應用的動畫名稱(必填)
[ animation-duration ]：檢索或設置對象動畫的持續時間(必填)
[ animation-timing-function ]：檢索或設置物件動畫的過渡類型
[ animation-delay ]：檢索或設置對象動畫延遲的時間
[ animation-iteration-count ]：檢索或設置物件動畫的迴圈次數
[ animation-direction ]：檢索或設置物件動畫在迴圈中是否反向運動
以下範例都是用相同的keyframes作介紹，僅調整animation的屬性。

+keyframes(ifinityCircles)
  from
    +transform(rotate(0))
  to
    +transform(rotate(360deg))

和其他屬性一樣，animation有許多屬性可以設定，當然也可以用一個animation涵蓋全部，以下幾張會分別介紹以下屬性的用途。

來源：http://css.doyoe.com/
[ animation-name ]：設置物件所應用的動畫名稱(必填)
[ animation-duration ]：檢索或設置對象動畫的持續時間(必填)
[ animation-timing-function ]：檢索或設置物件動畫的過渡類型
[ animation-delay ]：檢索或設置對象動畫延遲的時間
[ animation-iteration-count ]：檢索或設置物件動畫的迴圈次數
[ animation-direction ]：檢索或設置物件動畫在迴圈中是否反向運動
以下範例都是用相同的keyframes作介紹，僅調整animation的屬性。

+keyframes(ifinityCircles)
  from
    +transform(rotate(0))
  to
    +transform(rotate(360deg))

以下demo靜態都長一樣...，就不貼了，建議到http://ashareaday.wcc.tw/#2013-10-18觀看
Name 及 Duration
就像上面所說的，就算是每個屬性可以分開設定，但其實也是可以用一個animation寫一起，以下的範例都是寫一起，就不分開設定了。

Name和Duration都是必填屬性，所以必須一起介紹，在這邊都是引用上面的那一組keyframe。

+animation(ifinityCircles 3s)
//ifinityCircles 是 keyframe的name
//3s 是duration

除了name相同外，我們改變時間，動畫時間會明顯的變長。

+animation(ifinityCircles 8s)

Timing-function
速率的timing-function可以參考: http://ashareaday.wcc.tw/#2013-08-24

建議可以參考上面的範例，animation和transition所使用的timing-function是相同的，所以可以先把常用的記起來~。

+animation(ifinityCircles 3s ease)
//ease就是 timing-function的預設值

在這種旋轉的動畫，我喜歡設定線性(linear)的timing-function。

+animation(ifinityCircles 3s linear)

明天的章節，在介紹剩下的animation屬性~

我的鐵人賽30天已經結束，而現在都會以比較短篇的系列形式每天發文，這樣每天一點點的方式對學習效果其實不錯~。