animate.sass-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/MIT-LICENSE +20 -0
- data/README.md +26 -0
- data/Rakefile +26 -0
- data/lib/animate.sass-rails.rb +6 -0
- data/lib/animate.sass-rails/version.rb +3 -0
- data/vendor/assets/stylesheets/_animate.sass +7 -0
- data/vendor/assets/stylesheets/animate/_animations.sass +35 -0
- data/vendor/assets/stylesheets/animate/_css3.sass +3 -0
- data/vendor/assets/stylesheets/animate/_shared.sass +2 -0
- data/vendor/assets/stylesheets/animate/_utilities.sass +1 -0
- data/vendor/assets/stylesheets/animate/animations/_attention-seekers.sass +7 -0
- data/vendor/assets/stylesheets/animate/animations/_bouncing-entrances.sass +5 -0
- data/vendor/assets/stylesheets/animate/animations/_bouncing-exits.sass +5 -0
- data/vendor/assets/stylesheets/animate/animations/_fading-entrances.sass +12 -0
- data/vendor/assets/stylesheets/animate/animations/_fading-exits.sass +12 -0
- data/vendor/assets/stylesheets/animate/animations/_flippers.sass +5 -0
- data/vendor/assets/stylesheets/animate/animations/_rotating-entrances.sass +5 -0
- data/vendor/assets/stylesheets/animate/animations/_rotating-exits.sass +5 -0
- data/vendor/assets/stylesheets/animate/animations/_specials.sass +3 -0
- data/vendor/assets/stylesheets/animate/animations/attention-seekers/_bounce.sass +42 -0
- data/vendor/assets/stylesheets/animate/animations/attention-seekers/_flash.sass +38 -0
- data/vendor/assets/stylesheets/animate/animations/attention-seekers/_pulse.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/attention-seekers/_shake.sass +50 -0
- data/vendor/assets/stylesheets/animate/animations/attention-seekers/_swing.sass +41 -0
- data/vendor/assets/stylesheets/animate/animations/attention-seekers/_tada.sass +50 -0
- data/vendor/assets/stylesheets/animate/animations/attention-seekers/_wobble.sass +44 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-entrances/_bounceIn.sass +38 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-entrances/_bounceInDown.sass +38 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-entrances/_bounceInLeft.sass +38 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-entrances/_bounceInRight.sass +38 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-entrances/_bounceInUp.sass +38 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-exits/_bounceOut.sass +38 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-exits/_bounceOutDown.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-exits/_bounceOutLeft.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-exits/_bounceOutRight.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/bouncing-exits/_bounceOutUp.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/fading-entrances/_fadeIn.sass +32 -0
- data/vendor/assets/stylesheets/animate/animations/fading-entrances/_fadeInDown.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-entrances/_fadeInDownBig.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-entrances/_fadeInLeft.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-entrances/_fadeInLeftBig.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-entrances/_fadeInRight.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-entrances/_fadeInRightBig.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-entrances/_fadeInUp.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-entrances/_fadeInUpBig.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-exits/_fadeOut.sass +32 -0
- data/vendor/assets/stylesheets/animate/animations/fading-exits/_fadeOutDown.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-exits/_fadeOutDownBig.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-exits/_fadeOutLeft.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-exits/_fadeOutLeftBig.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-exits/_fadeOutRight.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-exits/_fadeOutRightBig.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-exits/_fadeOutUp.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/fading-exits/_fadeOutUpBig.sass +34 -0
- data/vendor/assets/stylesheets/animate/animations/flippers/_flip.sass +44 -0
- data/vendor/assets/stylesheets/animate/animations/flippers/_flipInX.sass +39 -0
- data/vendor/assets/stylesheets/animate/animations/flippers/_flipInY.sass +39 -0
- data/vendor/assets/stylesheets/animate/animations/flippers/_flipOutX.sass +35 -0
- data/vendor/assets/stylesheets/animate/animations/flippers/_flipOutY.sass +35 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-entrances/_rotateIn.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-entrances/_rotateInDownLeft.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-entrances/_rotateInDownRight.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-entrances/_rotateInUpLeft.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-entrances/_rotateInUpRight.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-exits/_rotateOut.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-exits/_rotateOutDownLeft.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-exits/_rotateOutDownRight.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-exits/_rotateOutUpLeft.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/rotating-exits/_rotateOutUpRight.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/specials/_hinge.sass +48 -0
- data/vendor/assets/stylesheets/animate/animations/specials/_rollIn.sass +36 -0
- data/vendor/assets/stylesheets/animate/animations/specials/_rollOut.sass +36 -0
- data/vendor/assets/stylesheets/animate/css3/_animation.sass +49 -0
- data/vendor/assets/stylesheets/animate/css3/_backface-visibility.sass +8 -0
- data/vendor/assets/stylesheets/animate/css3/_transform.sass +19 -0
- data/vendor/assets/stylesheets/animate/css3/animation/_animation-delay.sass +10 -0
- data/vendor/assets/stylesheets/animate/css3/animation/_animation-direction.sass +10 -0
- data/vendor/assets/stylesheets/animate/css3/animation/_animation-duration.sass +10 -0
- data/vendor/assets/stylesheets/animate/css3/animation/_animation-fill-mode.sass +10 -0
- data/vendor/assets/stylesheets/animate/css3/animation/_animation-iteration-count.sass +10 -0
- data/vendor/assets/stylesheets/animate/css3/animation/_animation-name.sass +10 -0
- data/vendor/assets/stylesheets/animate/css3/animation/_animation-play-state.sass +10 -0
- data/vendor/assets/stylesheets/animate/css3/animation/_animation-timing-function.sass +10 -0
- data/vendor/assets/stylesheets/animate/utilities/_mixins.sass +7 -0
- metadata +146 -0
@@ -0,0 +1,36 @@
|
|
1
|
+
=rotateInUpLeft($prefix)
|
2
|
+
0%
|
3
|
+
+transform-origin(left bottom, $prefix)
|
4
|
+
+transform(rotate(90deg), $prefix)
|
5
|
+
opacity: 0
|
6
|
+
100%
|
7
|
+
+transform-origin(left bottom, $prefix)
|
8
|
+
+transform(rotate(0), $prefix)
|
9
|
+
opacity: 1
|
10
|
+
|
11
|
+
@if $experimental-support-for-webkit
|
12
|
+
@-webkit-keyframes rotateInUpLeft
|
13
|
+
+rotateInUpLeft(webkit)
|
14
|
+
|
15
|
+
@if $experimental-support-for-khtml
|
16
|
+
@-khtml-keyframes rotateInUpLeft
|
17
|
+
+rotateInUpLeft(khtml)
|
18
|
+
|
19
|
+
@if $experimental-support-for-mozilla
|
20
|
+
@-moz-keyframes rotateInUpLeft
|
21
|
+
+rotateInUpLeft(moz)
|
22
|
+
|
23
|
+
@if $experimental-support-for-microsoft
|
24
|
+
@-ms-keyframes rotateInUpLeft
|
25
|
+
+rotateInUpLeft(ms)
|
26
|
+
|
27
|
+
@if $experimental-support-for-opera
|
28
|
+
@-o-keyframes rotateInUpLeft
|
29
|
+
+rotateInUpLeft(o)
|
30
|
+
|
31
|
+
@keyframes rotateInUpLeft
|
32
|
+
+rotateInUpLeft(none)
|
33
|
+
|
34
|
+
|
35
|
+
.rotateInUpLeft
|
36
|
+
+animation-name(rotateInUpLeft)
|
@@ -0,0 +1,36 @@
|
|
1
|
+
=rotateInUpRight($prefix)
|
2
|
+
0%
|
3
|
+
+transform-origin(right bottom, $prefix)
|
4
|
+
+transform(rotate(-90deg), $prefix)
|
5
|
+
opacity: 0
|
6
|
+
100%
|
7
|
+
+transform-origin(right bottom, $prefix)
|
8
|
+
+transform(rotate(0), $prefix)
|
9
|
+
opacity: 1
|
10
|
+
|
11
|
+
@if $experimental-support-for-webkit
|
12
|
+
@-webkit-keyframes rotateInUpRight
|
13
|
+
+rotateInUpRight(webkit)
|
14
|
+
|
15
|
+
@if $experimental-support-for-khtml
|
16
|
+
@-khtml-keyframes rotateInUpRight
|
17
|
+
+rotateInUpRight(khtml)
|
18
|
+
|
19
|
+
@if $experimental-support-for-mozilla
|
20
|
+
@-moz-keyframes rotateInUpRight
|
21
|
+
+rotateInUpRight(moz)
|
22
|
+
|
23
|
+
@if $experimental-support-for-microsoft
|
24
|
+
@-ms-keyframes rotateInUpRight
|
25
|
+
+rotateInUpRight(ms)
|
26
|
+
|
27
|
+
@if $experimental-support-for-opera
|
28
|
+
@-o-keyframes rotateInUpRight
|
29
|
+
+rotateInUpRight(o)
|
30
|
+
|
31
|
+
@keyframes rotateInUpRight
|
32
|
+
+rotateInUpRight(none)
|
33
|
+
|
34
|
+
|
35
|
+
.rotateInUpRight
|
36
|
+
+animation-name(rotateInUpRight)
|
@@ -0,0 +1,36 @@
|
|
1
|
+
=rotateOut($prefix)
|
2
|
+
0%
|
3
|
+
+transform-origin(center center, $prefix)
|
4
|
+
+transform(rotate(0), $prefix)
|
5
|
+
opacity: 1
|
6
|
+
100%
|
7
|
+
+transform-origin(center center, $prefix)
|
8
|
+
+transform(rotate(200deg), $prefix)
|
9
|
+
opacity: 0
|
10
|
+
|
11
|
+
@if $experimental-support-for-webkit
|
12
|
+
@-webkit-keyframes rotateOut
|
13
|
+
+rotateOut(webkit)
|
14
|
+
|
15
|
+
@if $experimental-support-for-khtml
|
16
|
+
@-khtml-keyframes rotateOut
|
17
|
+
+rotateOut(khtml)
|
18
|
+
|
19
|
+
@if $experimental-support-for-mozilla
|
20
|
+
@-moz-keyframes rotateOut
|
21
|
+
+rotateOut(moz)
|
22
|
+
|
23
|
+
@if $experimental-support-for-microsoft
|
24
|
+
@-ms-keyframes rotateOut
|
25
|
+
+rotateOut(ms)
|
26
|
+
|
27
|
+
@if $experimental-support-for-opera
|
28
|
+
@-o-keyframes rotateOut
|
29
|
+
+rotateOut(o)
|
30
|
+
|
31
|
+
@keyframes rotateOut
|
32
|
+
+rotateOut(none)
|
33
|
+
|
34
|
+
|
35
|
+
.rotateOut
|
36
|
+
+animation-name(rotateOut)
|
@@ -0,0 +1,36 @@
|
|
1
|
+
=rotateOutDownLeft($prefix)
|
2
|
+
0%
|
3
|
+
+transform-origin(left bottom, $prefix)
|
4
|
+
+transform(rotate(0), $prefix)
|
5
|
+
opacity: 1
|
6
|
+
100%
|
7
|
+
+transform-origin(left bottom, $prefix)
|
8
|
+
+transform(rotate(90deg), $prefix)
|
9
|
+
opacity: 0
|
10
|
+
|
11
|
+
@if $experimental-support-for-webkit
|
12
|
+
@-webkit-keyframes rotateOutDownLeft
|
13
|
+
+rotateOutDownLeft(webkit)
|
14
|
+
|
15
|
+
@if $experimental-support-for-khtml
|
16
|
+
@-khtml-keyframes rotateOutDownLeft
|
17
|
+
+rotateOutDownLeft(khtml)
|
18
|
+
|
19
|
+
@if $experimental-support-for-mozilla
|
20
|
+
@-moz-keyframes rotateOutDownLeft
|
21
|
+
+rotateOutDownLeft(moz)
|
22
|
+
|
23
|
+
@if $experimental-support-for-microsoft
|
24
|
+
@-ms-keyframes rotateOutDownLeft
|
25
|
+
+rotateOutDownLeft(ms)
|
26
|
+
|
27
|
+
@if $experimental-support-for-opera
|
28
|
+
@-o-keyframes rotateOutDownLeft
|
29
|
+
+rotateOutDownLeft(o)
|
30
|
+
|
31
|
+
@keyframes rotateOutDownLeft
|
32
|
+
+rotateOutDownLeft(none)
|
33
|
+
|
34
|
+
|
35
|
+
.rotateOutDownLeft
|
36
|
+
+animation-name(rotateOutDownLeft)
|
@@ -0,0 +1,36 @@
|
|
1
|
+
=rotateOutDownRight($prefix)
|
2
|
+
0%
|
3
|
+
+transform-origin(right bottom, $prefix)
|
4
|
+
+transform(rotate(0), $prefix)
|
5
|
+
opacity: 1
|
6
|
+
100%
|
7
|
+
+transform-origin(right bottom, $prefix)
|
8
|
+
+transform(rotate(-90deg), $prefix)
|
9
|
+
opacity: 0
|
10
|
+
|
11
|
+
@if $experimental-support-for-webkit
|
12
|
+
@-webkit-keyframes rotateOutDownRight
|
13
|
+
+rotateOutDownRight(webkit)
|
14
|
+
|
15
|
+
@if $experimental-support-for-khtml
|
16
|
+
@-khtml-keyframes rotateOutDownRight
|
17
|
+
+rotateOutDownRight(khtml)
|
18
|
+
|
19
|
+
@if $experimental-support-for-mozilla
|
20
|
+
@-moz-keyframes rotateOutDownRight
|
21
|
+
+rotateOutDownRight(moz)
|
22
|
+
|
23
|
+
@if $experimental-support-for-microsoft
|
24
|
+
@-ms-keyframes rotateOutDownRight
|
25
|
+
+rotateOutDownRight(ms)
|
26
|
+
|
27
|
+
@if $experimental-support-for-opera
|
28
|
+
@-o-keyframes rotateOutDownRight
|
29
|
+
+rotateOutDownRight(o)
|
30
|
+
|
31
|
+
@keyframes rotateOutDownRight
|
32
|
+
+rotateOutDownRight(none)
|
33
|
+
|
34
|
+
|
35
|
+
.rotateOutDownRight
|
36
|
+
+animation-name(rotateOutDownRight)
|
@@ -0,0 +1,36 @@
|
|
1
|
+
=rotateOutUpLeft($prefix)
|
2
|
+
0%
|
3
|
+
+transform-origin(left bottom, $prefix)
|
4
|
+
+transform(rotate(0), $prefix)
|
5
|
+
opacity: 1
|
6
|
+
100%
|
7
|
+
+transform-origin(left bottom, $prefix)
|
8
|
+
+transform(rotate(-90deg), $prefix)
|
9
|
+
opacity: 0
|
10
|
+
|
11
|
+
@if $experimental-support-for-webkit
|
12
|
+
@-webkit-keyframes rotateOutUpLeft
|
13
|
+
+rotateOutUpLeft(webkit)
|
14
|
+
|
15
|
+
@if $experimental-support-for-khtml
|
16
|
+
@-khtml-keyframes rotateOutUpLeft
|
17
|
+
+rotateOutUpLeft(khtml)
|
18
|
+
|
19
|
+
@if $experimental-support-for-mozilla
|
20
|
+
@-moz-keyframes rotateOutUpLeft
|
21
|
+
+rotateOutUpLeft(moz)
|
22
|
+
|
23
|
+
@if $experimental-support-for-microsoft
|
24
|
+
@-ms-keyframes rotateOutUpLeft
|
25
|
+
+rotateOutUpLeft(ms)
|
26
|
+
|
27
|
+
@if $experimental-support-for-opera
|
28
|
+
@-o-keyframes rotateOutUpLeft
|
29
|
+
+rotateOutUpLeft(o)
|
30
|
+
|
31
|
+
@keyframes rotateOutUpLeft
|
32
|
+
+rotateOutUpLeft(none)
|
33
|
+
|
34
|
+
|
35
|
+
.rotateOutUpLeft
|
36
|
+
+animation-name(rotateOutUpLeft)
|
@@ -0,0 +1,36 @@
|
|
1
|
+
=rotateOutUpRight($prefix)
|
2
|
+
0%
|
3
|
+
+transform-origin(right bottom, $prefix)
|
4
|
+
+transform(rotate(0), $prefix)
|
5
|
+
opacity: 1
|
6
|
+
100%
|
7
|
+
+transform-origin(right bottom, $prefix)
|
8
|
+
+transform(rotate(90deg), $prefix)
|
9
|
+
opacity: 0
|
10
|
+
|
11
|
+
@if $experimental-support-for-webkit
|
12
|
+
@-webkit-keyframes rotateOutUpRight
|
13
|
+
+rotateOutUpRight(webkit)
|
14
|
+
|
15
|
+
@if $experimental-support-for-khtml
|
16
|
+
@-khtml-keyframes rotateOutUpRight
|
17
|
+
+rotateOutUpRight(khtml)
|
18
|
+
|
19
|
+
@if $experimental-support-for-mozilla
|
20
|
+
@-moz-keyframes rotateOutUpRight
|
21
|
+
+rotateOutUpRight(moz)
|
22
|
+
|
23
|
+
@if $experimental-support-for-microsoft
|
24
|
+
@-ms-keyframes rotateOutUpRight
|
25
|
+
+rotateOutUpRight(ms)
|
26
|
+
|
27
|
+
@if $experimental-support-for-opera
|
28
|
+
@-o-keyframes rotateOutUpRight
|
29
|
+
+rotateOutUpRight(o)
|
30
|
+
|
31
|
+
@keyframes rotateOutUpRight
|
32
|
+
+rotateOutUpRight(none)
|
33
|
+
|
34
|
+
|
35
|
+
.rotateOutUpRight
|
36
|
+
+animation-name(rotateOutUpRight)
|
@@ -0,0 +1,48 @@
|
|
1
|
+
=hinge($prefix)
|
2
|
+
0%
|
3
|
+
+animation-timing-function(ease-in-out, $prefix)
|
4
|
+
+transform(rotate(0), $prefix)
|
5
|
+
+transform-origin(top left, $prefix)
|
6
|
+
20%, 60%
|
7
|
+
+animation-timing-function(ease-in-out, $prefix)
|
8
|
+
+transform(rotate(80deg), $prefix)
|
9
|
+
+transform-origin(top left, $prefix)
|
10
|
+
40%
|
11
|
+
+transform(rotate(60deg), $prefix)
|
12
|
+
+transform-origin(top left, $prefix)
|
13
|
+
+animation-timing-function(ease-in-out, $prefix)
|
14
|
+
80%
|
15
|
+
opacity: 1
|
16
|
+
+animation-timing-function(ease-in-out, $prefix)
|
17
|
+
+transform(rotate(60deg) translateY(0), $prefix)
|
18
|
+
+transform-origin(top left, $prefix)
|
19
|
+
100%
|
20
|
+
+transform(translateY(700px), $prefix)
|
21
|
+
opacity: 0
|
22
|
+
|
23
|
+
@if $experimental-support-for-webkit
|
24
|
+
@-webkit-keyframes hinge
|
25
|
+
+hinge(webkit)
|
26
|
+
|
27
|
+
@if $experimental-support-for-khtml
|
28
|
+
@-khtml-keyframes hinge
|
29
|
+
+hinge(khtml)
|
30
|
+
|
31
|
+
@if $experimental-support-for-mozilla
|
32
|
+
@-moz-keyframes hinge
|
33
|
+
+hinge(moz)
|
34
|
+
|
35
|
+
@if $experimental-support-for-microsoft
|
36
|
+
@-ms-keyframes hinge
|
37
|
+
+hinge(ms)
|
38
|
+
|
39
|
+
@if $experimental-support-for-opera
|
40
|
+
@-o-keyframes hinge
|
41
|
+
+hinge(o)
|
42
|
+
|
43
|
+
@keyframes hinge
|
44
|
+
+hinge(none)
|
45
|
+
|
46
|
+
|
47
|
+
.hinge
|
48
|
+
+animation-name(hinge)
|
@@ -0,0 +1,36 @@
|
|
1
|
+
// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
|
2
|
+
|
3
|
+
=rollIn($prefix)
|
4
|
+
0%
|
5
|
+
opacity: 0
|
6
|
+
+transform(translateX(-100%) rotate(-120deg), $prefix)
|
7
|
+
100%
|
8
|
+
opacity: 1
|
9
|
+
+transform(translateX(0px) rotate(0deg), $prefix)
|
10
|
+
|
11
|
+
@if $experimental-support-for-webkit
|
12
|
+
@-webkit-keyframes rollIn
|
13
|
+
+rollIn(webkit)
|
14
|
+
|
15
|
+
@if $experimental-support-for-khtml
|
16
|
+
@-khtml-keyframes rollIn
|
17
|
+
+rollIn(khtml)
|
18
|
+
|
19
|
+
@if $experimental-support-for-mozilla
|
20
|
+
@-moz-keyframes rollIn
|
21
|
+
+rollIn(moz)
|
22
|
+
|
23
|
+
@if $experimental-support-for-microsoft
|
24
|
+
@-ms-keyframes rollIn
|
25
|
+
+rollIn(ms)
|
26
|
+
|
27
|
+
@if $experimental-support-for-opera
|
28
|
+
@-o-keyframes rollIn
|
29
|
+
+rollIn(o)
|
30
|
+
|
31
|
+
@keyframes rollIn
|
32
|
+
+rollIn(none)
|
33
|
+
|
34
|
+
|
35
|
+
.rollIn
|
36
|
+
+animation-name(rollIn)
|
@@ -0,0 +1,36 @@
|
|
1
|
+
// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
|
2
|
+
|
3
|
+
=rollOut($prefix)
|
4
|
+
0%
|
5
|
+
opacity: 1
|
6
|
+
+transform(translateX(0px) rotate(0deg), $prefix)
|
7
|
+
100%
|
8
|
+
opacity: 0
|
9
|
+
+transform(translateX(100%) rotate(120deg), $prefix)
|
10
|
+
|
11
|
+
@if $experimental-support-for-webkit
|
12
|
+
@-webkit-keyframes rollOut
|
13
|
+
+rollOut(webkit)
|
14
|
+
|
15
|
+
@if $experimental-support-for-khtml
|
16
|
+
@-khtml-keyframes rollOut
|
17
|
+
+rollOut(khtml)
|
18
|
+
|
19
|
+
@if $experimental-support-for-mozilla
|
20
|
+
@-moz-keyframes rollOut
|
21
|
+
+rollOut(moz)
|
22
|
+
|
23
|
+
@if $experimental-support-for-microsoft
|
24
|
+
@-ms-keyframes rollOut
|
25
|
+
+rollOut(ms)
|
26
|
+
|
27
|
+
@if $experimental-support-for-opera
|
28
|
+
@-o-keyframes rollOut
|
29
|
+
+rollOut(o)
|
30
|
+
|
31
|
+
@keyframes rollOut
|
32
|
+
+rollOut(none)
|
33
|
+
|
34
|
+
|
35
|
+
.rollOut
|
36
|
+
+animation-name(rollOut)
|
@@ -0,0 +1,49 @@
|
|
1
|
+
// Pulled from Bourbon ~ SHA: 93beb25236
|
2
|
+
// Bourbon ~ https://github.com/thoughtbot/bourbon
|
3
|
+
|
4
|
+
// CSS3 Animations - http://www.w3.org/TR/css3-animations/
|
5
|
+
//
|
6
|
+
// Each of these mixins support comma separated lists of values, which
|
7
|
+
// allows different transitions for individual properties to be described
|
8
|
+
// in a single style rule. Each value in the list corresponds to the value
|
9
|
+
// at that same position in the other properties.
|
10
|
+
|
11
|
+
@import animation/animation-name
|
12
|
+
@import animation/animation-duration
|
13
|
+
@import animation/animation-timing-function
|
14
|
+
@import animation/animation-iteration-count
|
15
|
+
@import animation/animation-direction
|
16
|
+
@import animation/animation-play-state
|
17
|
+
@import animation/animation-delay
|
18
|
+
@import animation/animation-fill-mode
|
19
|
+
|
20
|
+
// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
|
21
|
+
// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
|
22
|
+
|
23
|
+
=animation-basic($name, $time: 0, $motion: ease)
|
24
|
+
$length-of-name: length($name)
|
25
|
+
$length-of-time: length($time)
|
26
|
+
$length-of-motion: length($motion)
|
27
|
+
@if $length-of-name > 1
|
28
|
+
+animation-name(zip($name))
|
29
|
+
@else
|
30
|
+
+animation-name($name)
|
31
|
+
@if $length-of-time > 1
|
32
|
+
+animation-duration(zip($time))
|
33
|
+
@else
|
34
|
+
+animation-duration($time)
|
35
|
+
@if $length-of-motion > 1
|
36
|
+
+animation-timing-function(zip($motion))
|
37
|
+
@else
|
38
|
+
+animation-timing-function($motion)
|
39
|
+
|
40
|
+
// Official animation shorthand property. Needs more work to actually be useful.
|
41
|
+
// Spec - http://www.w3.org/TR/css3-animations/#animation
|
42
|
+
// Values: name duration timing-function delay iteration-count direction
|
43
|
+
|
44
|
+
=animation($name: fadeIn, $duration: 1s, $timing-function: ease, $delay: 0.2s, $iteration-count: 1, $direction: normal, $prefix: false)
|
45
|
+
$value: $name $duration $timing-function $delay $iteration-count $direction
|
46
|
+
@if $prefix
|
47
|
+
+declaration(animation, $value, $prefix)
|
48
|
+
@else
|
49
|
+
+experimental(animation, $value)
|
@@ -0,0 +1,8 @@
|
|
1
|
+
// animation-delay - http://www.w3.org/TR/css3-animations/#the-animation-delay-property-
|
2
|
+
|
3
|
+
=backface-visibility($value: visible, $prefix: false)
|
4
|
+
// <time>
|
5
|
+
@if $prefix
|
6
|
+
+declaration(backface-visibility, $value, $prefix)
|
7
|
+
@else
|
8
|
+
+experimental(backface-visibility, $value)
|
@@ -0,0 +1,19 @@
|
|
1
|
+
// transform - https://developer.mozilla.org/en/CSS/transform
|
2
|
+
// none | <transform-function>
|
3
|
+
|
4
|
+
=transform($value: none, $prefix: false)
|
5
|
+
@if $prefix
|
6
|
+
+declaration(transform, $value, $prefix)
|
7
|
+
@else
|
8
|
+
+experimental(transform, $value)
|
9
|
+
|
10
|
+
// transform-origin - https://developer.mozilla.org/en/CSS/transform-origin
|
11
|
+
// x-axis - left | center | right | length | %
|
12
|
+
// y-axis - top | center | bottom | length | %
|
13
|
+
// z-axis - length
|
14
|
+
|
15
|
+
=transform-origin($value: 50%, $prefix: false)
|
16
|
+
@if $prefix
|
17
|
+
+declaration(transform-origin, $value, $prefix)
|
18
|
+
@else
|
19
|
+
+experimental(transform-origin, $value)
|