Animation 和 keyframe

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

Sass中 Keyframe , Animation的@mixin

Compass目前版本似乎沒有支援animation，首先要先準備兩個mixin，一個是keyframe，另一個是animation。

參考：https://gist.github.com/ericam/1607696

//@mixin for keyframe
=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

//@mixin for animation
=animation($content)
  -webkit-animation: $content
  -moz-animation: $content
  -o-animation: $content
  animation: $content

如果沒有意外，這些sass就可以對應各種瀏覽器的前輟詞，現在就立馬做一個簡單的demo吧！

Demo

%box
  height: 100px
  width: 100px
  margin: 0 auto
  background: orange

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

div
    @extend %box
    +animation(ifinityCircles 3s infinite linear)

就這樣馬上就能完成animation，輕鬆愜意～

Keyframe

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 : 動畫在結束時，會反轉回去