iT邦幫忙

DAY 31
7

CSS沒有極限系列 第 27

CSS沒有極限 - 如何用sass寫animation

都寫了...就順便貼過來了
範例連結: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,輕鬆愜意~


上一篇
CSS沒有極限 - 鐵人賽不是開始,也不是結束
下一篇
Animation 和 keyframe
系列文
CSS沒有極限41

1 則留言

我要留言

立即登入留言