iT邦幫忙

DAY 33
6

CSS沒有極限系列 第 29

Animation 的各項設定值(1)

範例請到: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天已經結束,而現在都會以比較短篇的系列形式每天發文,這樣每天一點點的方式對學習效果其實不錯~。


上一篇
Animation 和 keyframe
下一篇
Animation 的各項設定值(2)
系列文
CSS沒有極限41

1 則留言

我要留言

立即登入留言