都寫了...就順便貼過來了
範例連結:http://ashareaday.wcc.tw/#2013-10-16
Compass目前版本似乎沒有支援animation，首先要先準備兩個mixin，一個是keyframe，另一個是animation。

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

//@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，輕鬆愜意～