iT邦幫忙

4

30天掌握Sass語法 - (15)如何透過Sass&Compass支援CSS3動畫效果

這次的主題主要是要分享自己是如何透過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也很適合去做轉場或翻頁效果,
可因應情況來去做對應的動畫設計,
在建置時同時也需考慮『降級優雅,漸進增強』的做法,

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


0
zekixfly
iT邦新手 5 級 ‧ 2014-10-27 11:10:51

洧杰前輩,
不知道為什麼我沒辦法使用_animate.sass的特效
可以導入import animate
但沒辦法使用 +animate(fadeIn, 3s, 2s) 這個語法
他會顯示如下列的錯誤
Error: Undefined mixin 'experimental'.
on line 4 of D:/sass/ZekiProject/sass/_animate.sass, in experimental' from line 4 of D:/sass/ZekiProject/sass/\_animate.sass, inanimate'
from line 30 of D:/sass/ZekiProject/sass/ZekiFront-EndStyle.sass

會是因為我是用Sublime Text3的關係嗎?

廖洧杰 iT邦高手 5 級 ‧ 2014-10-27 11:34:26 檢舉

hi, experimental這個是 compass的@mixin,
你要先 @import compass,才有辦法用animate這個sass檔哦

zekixfly iT邦新手 5 級 ‧ 2014-10-27 11:45:12 檢舉

原來如此,終於可以了,感謝前輩的指導Orz

0
gill163
iT邦新手 5 級 ‧ 2014-10-29 22:10:09

洧杰大大,

我是寫scss,下載了_animate.sass已經轉成scss的檔,但裡面有一段code我不知如果改成scss的格式,在網路上有找到以下這個解法,但全部的keyframe內容會被載入網頁變得很龐大,能不能幫我看看要如何改善,萬分感謝。

sass的code:
=animate($name: fadeIn, $duration: 1s, $delay: .2s, $function: ease, $mode: both) +experimental(animation, $name $duration $delay $function $mode)

網路找到的scss code:

@mixin animate($name, $duration, $delay, $function, $mode) {
name: $name;
duration: $duration;
delay: $delay;
function: $function;
mode: $mode;
}
運用時的寫法:

.test {
@include animate(fadein, 1s, .2s, ease, both);
}

0
gill163
iT邦新手 5 級 ‧ 2014-10-30 16:59:54

洧杰大大,

上個問題我用轉檔網站處理好了,_animate目前運作很正常,但所有的keyframe都會被匯到css裡,css變得很長,請問有什麼放法讓他只秀有用到的keyframe嗎? 或是有什麼建議? 謝謝

廖洧杰 iT邦高手 5 級 ‧ 2014-10-30 17:04:00 檢舉

http://thecssguru.freeiz.com/animate/src/partials/\_animate.sass
你可以到裡面只抓你要的效果,除了最上面的@mixin,
從註解//KeyFrame Defaults (pre-made don't edit) 下面的都是 效果,
譬如你是要tada,那就只抓出tada的-keyframes就好,其他的就刪掉,
這樣就可以節省很多空間哩

我要留言

立即登入留言