和其他屬性一樣,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))
Name 及 Duration
就像上面所說的,就算是每個屬性可以分開設定,但其實也是可以用一個animation
寫一起,以下的範例都是寫一起,就不分開設定了。
Name和Duration都是必填屬性,所以必須一起介紹,在這邊都是引用上面的那一組keyframe。
+animation(ifinityCircles 3s) //ifinityCircles 是 keyframe的name //3s 是duration
除了name相同外,我們改變時間,動畫時間會明顯的變長。
+animation(ifinityCircles 8s)
Timing-function
速率的timing-function可以參考: /css/2013/08/24/css-transtion-speed/
建議可以參考上面的範例,animation和transition所使用的timing-function是相同的,所以可以先把常用的記起來~。
+animation(ifinityCircles 3s ease) //ease就是 timing-function的預設值
在這種旋轉的動畫,我喜歡設定線性(linear)的timing-function。
+animation(ifinityCircles 3s linear)
Delay
如同字義的意思,就是延遲撥放動畫,有些時候可以用這效果讓多個動畫做出層次感。
+animation(ifinityCircles 3s) //沒有delay +animation(ifinityCircles 3s 1.5s) //第二個秒數設定,會被判定為delay
Iteration-count
動畫重複的次數,預設值是1次,如果要多次直接輸入次數即可,而無限次數就要輸入infinite。
+animation(ifinityCircles 1.5s 2) //重複2次 +animation(ifinityCircles 1.5s infinite) //重複無限次
Direction
決定動畫順轉或是逆轉的模式,這邊的範例用無限次撥放比較好說明。
+animation(ifinityCircles 1.5s reverse infinite) //一直保持逆轉的模式 +animation(ifinityCircles 1.5s alternate-reverse infinite) //先逆轉,然後再順轉回去 +animation(ifinityCircles 1.5s alternate infinite) //首先是順轉,會在逆轉回去