iT邦幫忙

DAY 32
9

CSS沒有極限系列 第 28

Animation 和 keyframe

範例網址:http://ashareaday.wcc.tw/#2013-10-17
CSS的Animation分為兩個部分,一個是決定動畫該如何跑的Keyframe,另一個是將動畫載入元素的Animation。簡單來說,就是先製作一個keyframe來決定動畫的影格動作,在將動作載入元素,而這兩個都是必要的。

CSS的Animation分為兩個部分,一個是決定動畫該如何跑的Keyframe,另一個是將動畫載入元素的Animation。簡單來說,就是先製作一個keyframe來決定動畫的影格動作,在將動作載入元素,而這兩個都是必要的。

Keyframe
目前的keyframe的前輟詞都是必須的,如果不想打前輟詞請參考上一章節animation的mixin。

Keyframe在設定上也很容易,我們直接看下面的demo就可以了。

keyframe設定

//sass code
//我們製作兩款keyframe樣式,一款是from to,另一款就是百分比。
//這一款from to 其實就是0%~100%的意思
+keyframes(ifinityCircles)
  from
    +transform(rotate(0))
    //不管事百分比或是from to,都可以直接在這邊設定每個階段的動作
  to
    +transform(rotate(360deg))




//如果另外設定百分比,就可以設定更細節的設定
+keyframes(ifinityCircles2)
  0%
    +transform(rotate(0))
  50%
    +transform(translateX(-100%) rotate(180deg))
  100%
    +transform(translateX(100%) rotate(360deg))

元素的animation設定

.box
  +animation(ifinityCircles 3s infinite linear)
  //這邊可以就可以直接引用剛剛的keyframe
  //ifinityCircles : keyframe自訂義名稱
  //3s : 持續時間
  //infinite : 反覆次數(無限)
  //linear : 動畫曲線(速率一致就對了)

.box1
  +animation(ifinityCircles2 3s infinite linear alternate)
  //alternate : 動畫在結束時,會反轉回去


上一篇
CSS沒有極限 - 如何用sass寫animation
下一篇
Animation 的各項設定值(1)
系列文
CSS沒有極限41

2 則留言

我要留言

立即登入留言