sammy 0.0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +4 -0
- data/lib/sammy.rb +9 -0
- data/stylesheets/_sammy.sass +3 -0
- data/stylesheets/sammy/_animations.scss +35 -0
- data/stylesheets/sammy/_css3.scss +3 -0
- data/stylesheets/sammy/_shared.scss +2 -0
- data/stylesheets/sammy/_utilities.scss +1 -0
- data/stylesheets/sammy/animations/_attention-seekers.scss +7 -0
- data/stylesheets/sammy/animations/_bouncing-entrances.scss +5 -0
- data/stylesheets/sammy/animations/_bouncing-exits.scss +5 -0
- data/stylesheets/sammy/animations/_fading-entrances.scss +12 -0
- data/stylesheets/sammy/animations/_fading-exits.scss +12 -0
- data/stylesheets/sammy/animations/_flippers.scss +5 -0
- data/stylesheets/sammy/animations/_rotating-entrances.scss +5 -0
- data/stylesheets/sammy/animations/_rotating-exits.scss +5 -0
- data/stylesheets/sammy/animations/_specials.scss +3 -0
- data/stylesheets/sammy/animations/attention-seekers/_bounce.scss +30 -0
- data/stylesheets/sammy/animations/attention-seekers/_flash.scss +28 -0
- data/stylesheets/sammy/animations/attention-seekers/_pulse.scss +28 -0
- data/stylesheets/sammy/animations/attention-seekers/_shake.scss +34 -0
- data/stylesheets/sammy/animations/attention-seekers/_swing.scss +30 -0
- data/stylesheets/sammy/animations/attention-seekers/_tada.scss +34 -0
- data/stylesheets/sammy/animations/attention-seekers/_wobble.scss +32 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceIn.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInDown.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInLeft.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInRight.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-entrances/_bounceInUp.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOut.scss +37 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutDown.scss +34 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutLeft.scss +34 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutRight.scss +34 -0
- data/stylesheets/sammy/animations/bouncing-exits/_bounceOutUp.scss +34 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeIn.scss +25 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInDown.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInDownBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInLeft.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInLeftBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInRight.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInRightBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInUp.scss +31 -0
- data/stylesheets/sammy/animations/fading-entrances/_fadeInUpBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOut.scss +25 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutDown.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutDownBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutLeft.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutLeftBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutRight.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutRightBig.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutUp.scss +31 -0
- data/stylesheets/sammy/animations/fading-exits/_fadeOutUpBig.scss +31 -0
- data/stylesheets/sammy/animations/flippers/_flip.scss +44 -0
- data/stylesheets/sammy/animations/flippers/_flipInX.scss +38 -0
- data/stylesheets/sammy/animations/flippers/_flipInY.scss +38 -0
- data/stylesheets/sammy/animations/flippers/_flipOutX.scss +32 -0
- data/stylesheets/sammy/animations/flippers/_flipOutY.scss +32 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateIn.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInDownRight.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-entrances/_rotateInUpRight.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOut.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutDownRight.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpLeft.scss +33 -0
- data/stylesheets/sammy/animations/rotating-exits/_rotateOutUpRight.scss +33 -0
- data/stylesheets/sammy/animations/specials/_hinge.scss +48 -0
- data/stylesheets/sammy/animations/specials/_rollIn.scss +33 -0
- data/stylesheets/sammy/animations/specials/_rollOut.scss +33 -0
- data/stylesheets/sammy/css3/_animation.scss +75 -0
- data/stylesheets/sammy/css3/_backface-visibility.scss +14 -0
- data/stylesheets/sammy/css3/_transform.scss +27 -0
- data/stylesheets/sammy/css3/animation/_animation-delay.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-direction.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-duration.scss +17 -0
- data/stylesheets/sammy/css3/animation/_animation-fill-mode.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-iteration-count.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-name.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-play-state.scss +18 -0
- data/stylesheets/sammy/css3/animation/_animation-timing-function.scss +18 -0
- data/stylesheets/sammy/utilities/_mixins.scss +12 -0
- data/templates/sammy/manifest.rb +2 -0
- data/templates/sammy/screen.scss +2 -0
- metadata +140 -0
@@ -0,0 +1,33 @@
|
|
1
|
+
@mixin rotateOutUpRight($prefix) {
|
2
|
+
0% {
|
3
|
+
@include transform-origin(right bottom, $prefix);
|
4
|
+
@include transform(rotate(0), $prefix);
|
5
|
+
opacity: 1;
|
6
|
+
}
|
7
|
+
100% {
|
8
|
+
@include transform-origin(right bottom, $prefix);
|
9
|
+
@include transform(rotate(90deg), $prefix);
|
10
|
+
opacity: 0;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rotateOutUpRight { @include rotateOutUpRight(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rotateOutUpRight { @include rotateOutUpRight(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rotateOutUpRight { @include rotateOutUpRight(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rotateOutUpRight { @include rotateOutUpRight(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rotateOutUpRight { @include rotateOutUpRight(o); }
|
28
|
+
}
|
29
|
+
@keyframes rotateOutUpRight { @include rotateOutUpRight(none); }
|
30
|
+
|
31
|
+
.rotateOutUpRight {
|
32
|
+
@include animation-name(rotateOutUpRight);
|
33
|
+
}
|
@@ -0,0 +1,48 @@
|
|
1
|
+
@mixin hinge($prefix) {
|
2
|
+
0% {
|
3
|
+
@include animation-timing-function(ease-in-out, $prefix);
|
4
|
+
@include transform(rotate(0), $prefix);
|
5
|
+
@include transform-origin(top left, $prefix);
|
6
|
+
}
|
7
|
+
20%, 60% {
|
8
|
+
@include animation-timing-function(ease-in-out, $prefix);
|
9
|
+
@include transform(rotate(80deg), $prefix);
|
10
|
+
@include transform-origin(top left, $prefix);
|
11
|
+
}
|
12
|
+
40% {
|
13
|
+
@include transform(rotate(60deg), $prefix);
|
14
|
+
@include transform-origin(top left, $prefix);
|
15
|
+
@include animation-timing-function(ease-in-out, $prefix);
|
16
|
+
}
|
17
|
+
80% {
|
18
|
+
opacity: 1;
|
19
|
+
@include animation-timing-function(ease-in-out, $prefix);
|
20
|
+
@include transform(rotate(60deg) translateY(0), $prefix);
|
21
|
+
@include transform-origin(top left, $prefix);
|
22
|
+
}
|
23
|
+
100% {
|
24
|
+
@include transform(translateY(700px), $prefix);
|
25
|
+
opacity: 0;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
@if $experimental-support-for-webkit {
|
30
|
+
@-webkit-keyframes hinge { @include hinge(webkit); }
|
31
|
+
}
|
32
|
+
@if $experimental-support-for-khtml {
|
33
|
+
@-khtml-keyframes hinge { @include hinge(khtml); }
|
34
|
+
}
|
35
|
+
@if $experimental-support-for-mozilla {
|
36
|
+
@-moz-keyframes hinge { @include hinge(moz); }
|
37
|
+
}
|
38
|
+
@if $experimental-support-for-microsoft {
|
39
|
+
@-ms-keyframes hinge { @include hinge(ms); }
|
40
|
+
}
|
41
|
+
@if $experimental-support-for-opera {
|
42
|
+
@-o-keyframes hinge { @include hinge(o); }
|
43
|
+
}
|
44
|
+
@keyframes hinge { @include hinge(none); }
|
45
|
+
|
46
|
+
.hinge {
|
47
|
+
@include animation-name(hinge);
|
48
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
|
2
|
+
|
3
|
+
@mixin rollIn($prefix) {
|
4
|
+
0% {
|
5
|
+
opacity: 0;
|
6
|
+
@include transform(translateX(-100%) rotate(-120deg), $prefix);
|
7
|
+
}
|
8
|
+
100% {
|
9
|
+
opacity: 1;
|
10
|
+
@include transform(translateX(0px) rotate(0deg), $prefix);
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rollIn { @include rollIn(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rollIn { @include rollIn(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rollIn { @include rollIn(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rollIn { @include rollIn(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rollIn { @include rollIn(o); }
|
28
|
+
}
|
29
|
+
@keyframes rollIn { @include rollIn(none); }
|
30
|
+
|
31
|
+
.rollIn {
|
32
|
+
@include animation-name(rollIn);
|
33
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
|
2
|
+
|
3
|
+
@mixin rollOut($prefix) {
|
4
|
+
0% {
|
5
|
+
opacity: 1;
|
6
|
+
@include transform(translateX(0px) rotate(0deg), $prefix);
|
7
|
+
}
|
8
|
+
100% {
|
9
|
+
opacity: 0;
|
10
|
+
@include transform(translateX(100%) rotate(120deg), $prefix);
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if $experimental-support-for-webkit {
|
15
|
+
@-webkit-keyframes rollOut { @include rollOut(webkit); }
|
16
|
+
}
|
17
|
+
@if $experimental-support-for-khtml {
|
18
|
+
@-khtml-keyframes rollOut { @include rollOut(khtml); }
|
19
|
+
}
|
20
|
+
@if $experimental-support-for-mozilla {
|
21
|
+
@-moz-keyframes rollOut { @include rollOut(moz); }
|
22
|
+
}
|
23
|
+
@if $experimental-support-for-microsoft {
|
24
|
+
@-ms-keyframes rollOut { @include rollOut(ms); }
|
25
|
+
}
|
26
|
+
@if $experimental-support-for-opera {
|
27
|
+
@-o-keyframes rollOut { @include rollOut(o); }
|
28
|
+
}
|
29
|
+
@keyframes rollOut { @include rollOut(none); }
|
30
|
+
|
31
|
+
.rollOut {
|
32
|
+
@include animation-name(rollOut);
|
33
|
+
}
|
@@ -0,0 +1,75 @@
|
|
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
|
+
@mixin animation-basic(
|
23
|
+
$name,
|
24
|
+
$time: 0,
|
25
|
+
$motion: ease
|
26
|
+
) {
|
27
|
+
|
28
|
+
$length-of-name: length($name);
|
29
|
+
$length-of-time: length($time);
|
30
|
+
$length-of-motion: length($motion);
|
31
|
+
|
32
|
+
@if $length-of-name > 1 {
|
33
|
+
@include animation-name(zip($name));
|
34
|
+
} @else {
|
35
|
+
@include animation-name($name);
|
36
|
+
}
|
37
|
+
|
38
|
+
@if $length-of-time > 1 {
|
39
|
+
@include animation-duration(zip($time));
|
40
|
+
} @else {
|
41
|
+
@include animation-duration($time);
|
42
|
+
}
|
43
|
+
|
44
|
+
@if $length-of-motion > 1 {
|
45
|
+
@include animation-timing-function(zip($motion));
|
46
|
+
} @else {
|
47
|
+
@include animation-timing-function($motion);
|
48
|
+
}
|
49
|
+
|
50
|
+
}
|
51
|
+
|
52
|
+
// Official animation shorthand property. Needs more work to actually be useful.
|
53
|
+
// Spec - http://www.w3.org/TR/css3-animations/#animation
|
54
|
+
// Values: name duration timing-function delay iteration-count direction
|
55
|
+
|
56
|
+
@mixin animation(
|
57
|
+
|
58
|
+
$name: fadeIn, // none | keyframe at-rule name
|
59
|
+
$duration: 1s, // <time>
|
60
|
+
$timing-function: ease, // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
|
61
|
+
$delay: 0.2s, // <time>
|
62
|
+
$iteration-count: 1, // infinite | number
|
63
|
+
$direction: normal, // normal | alternate
|
64
|
+
$prefix: false
|
65
|
+
) {
|
66
|
+
|
67
|
+
$value: $name $duration $timing-function $delay $iteration-count $direction;
|
68
|
+
|
69
|
+
@if $prefix {
|
70
|
+
@include declaration(animation, $value, $prefix);
|
71
|
+
} @else {
|
72
|
+
@include experimental(animation, $value);
|
73
|
+
}
|
74
|
+
|
75
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
// animation-delay - http://www.w3.org/TR/css3-animations/#the-animation-delay-property-
|
2
|
+
@mixin backface-visibility(
|
3
|
+
$value: visible,
|
4
|
+
$prefix: false
|
5
|
+
) {
|
6
|
+
|
7
|
+
// <time>
|
8
|
+
@if $prefix {
|
9
|
+
@include declaration(backface-visibility, $value, $prefix);
|
10
|
+
} @else {
|
11
|
+
@include experimental(backface-visibility, $value);
|
12
|
+
}
|
13
|
+
|
14
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// transform - https://developer.mozilla.org/en/CSS/transform
|
2
|
+
// none | <transform-function>
|
3
|
+
|
4
|
+
@mixin transform($value: none, $prefix: false) {
|
5
|
+
|
6
|
+
@if $prefix {
|
7
|
+
@include declaration(transform, $value, $prefix);
|
8
|
+
} @else {
|
9
|
+
@include experimental(transform, $value);
|
10
|
+
}
|
11
|
+
|
12
|
+
}
|
13
|
+
|
14
|
+
// transform-origin - https://developer.mozilla.org/en/CSS/transform-origin
|
15
|
+
// x-axis - left | center | right | length | %
|
16
|
+
// y-axis - top | center | bottom | length | %
|
17
|
+
// z-axis - length
|
18
|
+
|
19
|
+
@mixin transform-origin($value: 50%, $prefix: false) {
|
20
|
+
|
21
|
+
@if $prefix {
|
22
|
+
@include declaration(transform-origin, $value, $prefix);
|
23
|
+
} @else {
|
24
|
+
@include experimental(transform-origin, $value);
|
25
|
+
}
|
26
|
+
|
27
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-delay - http://www.w3.org/TR/css3-animations/#the-animation-delay-property-
|
2
|
+
@mixin animation-delay(
|
3
|
+
$time-1: 0,
|
4
|
+
$time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// <time>
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-delay, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-delay, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-direction - http://www.w3.org/TR/css3-animations/#the-animation-direction-property-
|
2
|
+
@mixin animation-direction(
|
3
|
+
$direction-1: normal,
|
4
|
+
$direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// normal | alternate
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-direction, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-direction, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
// animation-duration - http://www.w3.org/TR/css3-animations/#the-animation-duration-property-
|
2
|
+
@mixin animation-duration(
|
3
|
+
$time-1: 0,
|
4
|
+
$time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// <time>
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-duration, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-duration, $value);
|
16
|
+
}
|
17
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-fill-mode - http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
|
2
|
+
@mixin animation-fill-mode(
|
3
|
+
$mode-1: none,
|
4
|
+
$mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// none | forwards | backwards | both
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-fill-mode, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-fill-mode, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-iteration-count - http://www.w3.org/TR/css3-animations/#the-animation-iteration-count-property-
|
2
|
+
@mixin animation-iteration-count(
|
3
|
+
$value-1: 1,
|
4
|
+
$value-2: false, $value-3: false, $value-4: false, $value-5: false, $value-6: false, $value-7: false, $value-8: false, $value-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($value-1, $value-2, $value-3, $value-4, $value-5, $value-6, $value-7, $value-8, $value-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// infinite | <number>
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-iteration-count, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-iteration-count, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-name - http://www.w3.org/TR/css3-animations/#the-animation-name-property-
|
2
|
+
@mixin animation-name(
|
3
|
+
$name-1,
|
4
|
+
$name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// none | animation-name
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-name, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-name, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-play-state - http://www.w3.org/TR/css3-animations/#the-animation-play-state-property-
|
2
|
+
@mixin animation-play-state(
|
3
|
+
$state-1: running,
|
4
|
+
$state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// running | paused
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-play-state, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-play-state, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// animation-timing-function - http://www.w3.org/TR/css3-animations/#animation-timing-function_tag
|
2
|
+
@mixin animation-timing-function(
|
3
|
+
$motion-1: ease,
|
4
|
+
$motion-2: false, $motion-3: false, $motion-4: false, $motion-5: false, $motion-6: false, $motion-7: false, $motion-8: false, $motion-9: false,
|
5
|
+
$prefix: false
|
6
|
+
) {
|
7
|
+
|
8
|
+
$full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
|
9
|
+
$value: $full;
|
10
|
+
|
11
|
+
// ease | linear | ease-in | ease-out | ease-in-out
|
12
|
+
@if $prefix {
|
13
|
+
@include declaration(animation-timing-function, $value, $prefix);
|
14
|
+
} @else {
|
15
|
+
@include experimental(animation-timing-function, $value);
|
16
|
+
}
|
17
|
+
|
18
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
// Declariation mixin to make it easy to write a declaration with or without a prefix
|
2
|
+
@mixin declaration($property, $value, $prefix: none) {
|
3
|
+
|
4
|
+
$prefix: unquote($prefix);
|
5
|
+
|
6
|
+
@if $prefix == none {
|
7
|
+
#{$property}: $value;
|
8
|
+
} @else {
|
9
|
+
#{-$prefix}-#{$property}: $value;
|
10
|
+
}
|
11
|
+
|
12
|
+
}
|