這次的主題主要是要分享自己是如何透過Sass&Compass來支援動畫效果，
一共會分享Compass Transition，以及國外分享出來的Animate mixin framework，
首先我們就先來講transition，
如果你希望在CSS上面添入動畫效果的話，
那你的SASS必須寫成這樣：

@import compass/css3
.box
  color: #000
　background: red
  +transition(all 1s)
  &:hover
    color: #fff
    background: yellow

第一行自然是先載入compass的css3 mixin，
再來就寫+transition呼叫mxin，1s是代表動畫只跑一秒，
出現的code就會變成這樣：

.box{
  color:#000
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.box:hover{
  color:#fff;
  background:yellow;
}

當你滑鼠滑過去文字時，
背景與文字就不會是瞬間變動，
而是具有影格似地進行轉場，
所以透過這樣子的方式，
我們就可以去思考如何用transition來提升用戶體驗的品質。
這次的主題主要是要分享自己是如何透過Sass&Compass來支援動畫效果，
一共會分享Compass Transition，以及國外分享出來的Animate mixin framework，
首先我們就先來講transition，
如果你希望在CSS上面添入動畫效果的話，
那你的SASS必須寫成這樣：

@import compass/css3
.box
  color: #000
　background: red
  +transition(all 1s)
  &:hover
    color: #fff
    background: yellow

第一行自然是先載入compass的css3 mixin，
再來就寫+transition呼叫mxin，1s是代表動畫只跑一秒，
出現的code就會變成這樣：

.box{
  color:#000
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.box:hover{
  color:#fff;
  background:yellow;
}

當你滑鼠滑過去文字時，
背景與文字就不會是瞬間變動，
而是具有影格似地進行轉場，
所以透過這樣子的方式，
我們就可以去思考如何用transition來提升用戶體驗的品質。

如果你設計的CSS3動畫效果是比較複雜的話，
那就可以使用@keyframe來去設計，
關於@keyframe的介紹可以瀏覽此連結：
http://msdn.microsoft.com/zh-tw/library/ie/jj680076(v=vs.85).aspx

如果你覺得@keyframe要設定很多東西覺得麻煩，
那你可以嘗試用看看Sass的framework，animate.sass，
網址連結：http://thecssguru.freeiz.com/animate/

使用的步驟為：
1.下載_animate.sass，然後再@import進來
2.使用方法如下

@import compass/css3
@import animate
.one
  +animate(fadeIn, 3s, 2s)
//         動畫名稱,過程秒數,開始秒數

所以你就可以看看該網站有哪些效果你喜歡，
再把他載入進來就可以使用了。

像下面有個shake的動畫設計，
他會把整個區塊向左向右搖動，
這個東西就很適合拿來設計當使用者輸入錯誤資料時，
就用javascript動態載入class來觸發CSS3動畫，
或者bounceOutLeft也很適合去做轉場或翻頁效果，
可因應情況來去做對應的動畫設計，
在建置時同時也需考慮『降級優雅，漸進增強』的做法，

所以這裡也錄製了一段影片，
提供各位大家參考學習該如何去思考『降級優雅，漸進增強』的相關流程：