animate 0.1.0 → 0.2.beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. data/stylesheets/_animate.scss +15 -9
  2. data/stylesheets/_helpers.scss +10 -6
  3. data/stylesheets/animate/_attention.scss +13 -9
  4. data/stylesheets/animate/_bounce.scss +40 -34
  5. data/stylesheets/animate/_fade.scss +25 -21
  6. data/stylesheets/animate/_flip.scss +47 -33
  7. data/stylesheets/animate/_lightSpeed.scss +7 -3
  8. data/stylesheets/animate/_roll.scss +7 -3
  9. data/stylesheets/animate/_rotate.scss +17 -14
  10. data/stylesheets/animate/_special.scss +6 -2
  11. data/stylesheets/animate/attention/_flash.scss +21 -16
  12. data/stylesheets/animate/attention/_pulse.scss +15 -10
  13. data/stylesheets/animate/attention/_shake.scss +39 -34
  14. data/stylesheets/animate/attention/_swing.scss +24 -19
  15. data/stylesheets/animate/attention/_tada.scss +38 -33
  16. data/stylesheets/animate/attention/_wiggle.scss +39 -34
  17. data/stylesheets/animate/attention/_wobble.scss +27 -22
  18. data/stylesheets/animate/bounce/_bounceIn.scss +100 -75
  19. data/stylesheets/animate/bounce/_bounceOut.scss +88 -63
  20. data/stylesheets/animate/fade/_fadeIn.scss +133 -88
  21. data/stylesheets/animate/fade/_fadeOut.scss +133 -88
  22. data/stylesheets/animate/flip/_flipIn.scss +47 -33
  23. data/stylesheets/animate/flip/_flipOut.scss +35 -21
  24. data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss +22 -17
  25. data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss +14 -9
  26. data/stylesheets/animate/roll/_rollIn.scss +14 -9
  27. data/stylesheets/animate/roll/_rollOut.scss +13 -8
  28. data/stylesheets/animate/rotate/_rotateIn.scss +114 -72
  29. data/stylesheets/animate/rotate/_rotateOut.scss +114 -72
  30. data/stylesheets/animate/special/_hinge.scss +32 -27
  31. metadata +10 -7
data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss CHANGED
@@ -8,25 +8,30 @@
8
8
  // ---------------------------------------------------------------------------
9
9
  // lightSpeedIn
10
10
 
11
- @mixin animate-lightSpeedIn($class: $default-animation-class-mode) {
11
+ @mixin animate-lightSpeedIn(
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
12
15
  $name: lightSpeedIn;
13
- @include keyframes($name) {
14
- 0% {
15
- @include transform(translateX(100%) skewX(-30deg));
16
- @include opacity(0);
16
+ @if $keyframes {
17
+ @include keyframes($name) {
18
+ 0% {
19
+ @include transform(translateX(100%) skewX(-30deg));
20
+ @include opacity(0);
21
+ }
22
+ 60% {
23
+ @include transform(translateX(-20%) skewX(30deg));
24
+ @include opacity(1);
25
+ }
26
+ 80% {
27
+ @include transform(translateX(0%) skewX(-15deg));
28
+ @include opacity(1);
29
+ }
30
+ 100% {
31
+ @include transform(translateX(0%) skewX(0deg));
32
+ @include opacity(1);
33
+ }
17
34
  }
18
- 60% {
19
- @include transform(translateX(-20%) skewX(30deg));
20
- @include opacity(1);
21
- }
22
- 80% {
23
- @include transform(translateX(0%) skewX(-15deg));
24
- @include opacity(1);
25
- }
26
- 100% {
27
- @include transform(translateX(0%) skewX(0deg));
28
- @include opacity(1);
29
- }
30
35
  }
31
36
  @include animation-class($name, $class) {}
32
37
  }
data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss CHANGED
@@ -8,17 +8,22 @@
8
8
  // ---------------------------------------------------------------------------
9
9
  // lightSpeedOut
10
10
 
11
- @mixin animate-lightSpeedOut($class: $default-animation-class-mode) {
11
+ @mixin animate-lightSpeedOut(
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
12
15
  $name: lightSpeedOut;
13
- @include keyframes($name) {
14
- 0% {
15
- @include transform(translateX(0%) skewX(0deg));
16
- @include opacity(1);
16
+ @if $keyframes {
17
+ @include keyframes($name) {
18
+ 0% {
19
+ @include transform(translateX(0%) skewX(0deg));
20
+ @include opacity(1);
21
+ }
22
+ 100% {
23
+ @include transform(translateX(100%) skewX(-30deg));
24
+ @include opacity(0);
25
+ }
17
26
  }
18
- 100% {
19
- @include transform(translateX(100%) skewX(-30deg));
20
- @include opacity(0);
21
- }
22
27
  }
23
28
  @include animation-class($name, $class) {}
24
29
  }
data/stylesheets/animate/roll/_rollIn.scss CHANGED
@@ -8,16 +8,21 @@
8
8
  // ---------------------------------------------------------------------------
9
9
  // rollIn
10
10
 
11
- @mixin animate-rollIn($class: $default-animation-class-mode) {
11
+ @mixin animate-rollIn(
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
12
15
  $name: rollIn;
13
- @include keyframes($name) {
14
- 0% {
15
- @include opacity(0);
16
- @include transform(translateX(-100%) rotate(-120deg));
17
- }
18
- 100% {
19
- @include opacity(1);
20
- @include transform(translateX(0px) rotate(0deg));
16
+ @if $keyframes {
17
+ @include keyframes($name) {
18
+ 0% {
19
+ @include opacity(0);
20
+ @include transform(translateX(-100%) rotate(-120deg));
21
+ }
22
+ 100% {
23
+ @include opacity(1);
24
+ @include transform(translateX(0px) rotate(0deg));
25
+ }
21
26
  }
22
27
  }
23
28
  @include animation-class($name, $class) {}
data/stylesheets/animate/roll/_rollOut.scss CHANGED
@@ -8,15 +8,20 @@
8
8
  // ---------------------------------------------------------------------------
9
9
  // rollOut
10
10
 
11
- @mixin animate-rollOut($class: $default-animation-class-mode) {
11
+ @mixin animate-rollOut(
12
+ $class : $default-animation-class-mode,
13
+ $keyframes : $default-keyframes-output
14
+ ) {
12
15
  $name: rollOut;
13
- @include keyframes($name) {
14
- 0% {
15
- @include opacity(1);
16
- @include transform(translateX(0px) rotate(0deg)); }
17
- 100% {
18
- @include opacity(0);
19
- @include transform(translateX(-100%) rotate(-120deg));
16
+ @if $keyframes {
17
+ @include keyframes($name) {
18
+ 0% {
19
+ @include opacity(1);
20
+ @include transform(translateX(0px) rotate(0deg)); }
21
+ 100% {
22
+ @include opacity(0);
23
+ @include transform(translateX(-100%) rotate(-120deg));
24
+ }
20
25
  }
21
26
  }
22
27
  @include animation-class($name, $class) {}
data/stylesheets/animate/rotate/_rotateIn.scss CHANGED
@@ -6,10 +6,14 @@
6
6
  @import "compass/css3/opacity";
7
7
 
8
8
  // ---------------------------------------------------------------------------
9
- // rotateIn [ only | up | down | left | right |
9
+ // rotateIn [ only | up | down | left | right |
10
10
  // downLeft | downRight | upLeft | upRight | all ]
11
11
 
12
- @mixin animate-rotateIn($sub: all, $class: $default-animation-class-mode) {
12
+ @mixin animate-rotateIn(
13
+ $sub : all,
14
+ $class : $default-animation-class-mode,
15
+ $keyframes : $default-keyframes-output
16
+ ) {
13
17
  $sub : compact($sub);
14
18
  $only : yepnope($sub, all only);
15
19
  $downLeft : yepnope($sub, all down left downLeft);
@@ -17,24 +21,26 @@
17
21
  $upLeft : yepnope($sub, all up left upLeft);
18
22
  $upRight : yepnope($sub, all up right upRight);
19
23
 
20
- @if $downLeft { @include animate-rotateInDownLeft ($class); }
21
- @if $downRight { @include animate-rotateInDownRight ($class); }
22
- @if $upLeft { @include animate-rotateInUpLeft ($class); }
23
- @if $upRight { @include animate-rotateInUpRight ($class); }
24
+ @if $downLeft { @include animate-rotateInDownLeft ($class, $keyframes); }
25
+ @if $downRight { @include animate-rotateInDownRight ($class, $keyframes); }
26
+ @if $upLeft { @include animate-rotateInUpLeft ($class, $keyframes); }
27
+ @if $upRight { @include animate-rotateInUpRight ($class, $keyframes); }
24
28
 
25
29
  $name: rotateIn;
26
30
  @if $only {
27
- @include keyframes($name) {
28
- 0% {
29
- @include transform-origin(center, center);
30
- @include rotate(-200deg);
31
- opacity: 0;
31
+ @if $keyframes {
32
+ @include keyframes($name) {
33
+ 0% {
34
+ @include transform-origin(center, center);
35
+ @include rotate(-200deg);
36
+ opacity: 0;
37
+ }
38
+ 100% {
39
+ @include transform-origin(center, center);
40
+ @include rotate(0);
41
+ opacity: 1;
42
+ }
32
43
  }
33
- 100% {
34
- @include transform-origin(center, center);
35
- @include rotate(0);
36
- opacity: 1;
37
- }
38
44
  }
39
45
  @include animation-class($name, $class) {}
40
46
  }
@@ -43,64 +49,85 @@
43
49
  // ---------------------------------------------------------------------------
44
50
  // rotateInUp [ left | right | all ]
45
51
 
46
- @mixin animate-rotateInUp($sub: all, $class: $default-animation-class-mode) {
52
+ @mixin animate-rotateInUp(
53
+ $sub : all,
54
+ $class : $default-animation-class-mode,
55
+ $keyframes : $default-keyframes-output
56
+ ) {
47
57
  $sub : compact($sub);
48
58
  $left : yepnope($sub, all left);
49
59
  $right : yepnope($sub, all right);
50
- @if $left { @include animate-rotateInUpLeft ($class); }
51
- @if $right { @include animate-rotateInUpRight ($class); }
60
+ @if $left { @include animate-rotateInUpLeft ($class, $keyframes); }
61
+ @if $right { @include animate-rotateInUpRight ($class, $keyframes); }
52
62
  }
53
63
 
54
64
  // ---------------------------------------------------------------------------
55
65
  // rotateInDown [ left | right | all ]
56
66
 
57
- @mixin animate-rotateInDown($sub: all, $class: $default-animation-class-mode) {
67
+ @mixin animate-rotateInDown(
68
+ $sub : all,
69
+ $class : $default-animation-class-mode,
70
+ $keyframes : $default-keyframes-output
71
+ ) {
58
72
  $sub : compact($sub);
59
73
  $left : yepnope($sub, all left);
60
74
  $right : yepnope($sub, all right);
61
- @if $left { @include animate-rotateInDownLeft ($class); }
62
- @if $right { @include animate-rotateInDownRight ($class); }
75
+ @if $left { @include animate-rotateInDownLeft ($class, $keyframes); }
76
+ @if $right { @include animate-rotateInDownRight ($class, $keyframes); }
63
77
  }
64
78
 
65
79
 
66
80
  // ---------------------------------------------------------------------------
67
81
  // rotateInLeft [ up | down | all ]
68
82
 
69
- @mixin animate-rotateInLeft($sub: all, $class: $default-animation-class-mode) {
83
+ @mixin animate-rotateInLeft(
84
+ $sub : all,
85
+ $class : $default-animation-class-mode,
86
+ $keyframes : $default-keyframes-output
87
+ ) {
70
88
  $sub : compact($sub);
71
89
  $up : yepnope($sub, all up);
72
90
  $down : yepnope($sub, all down);
73
- @if $up { @include animate-rotateInUpLeft ($class); }
74
- @if $down { @include animate-rotateInDownLeft ($class); }
91
+ @if $up { @include animate-rotateInUpLeft ($class, $keyframes); }
92
+ @if $down { @include animate-rotateInDownLeft ($class, $keyframes); }
75
93
  }
76
94
 
77
95
  // ---------------------------------------------------------------------------
78
96
  // rotateInRight [ up | down | all ]
79
97
 
80
- @mixin animate-rotateInRight($sub: all, $class: $default-animation-class-mode) {
98
+ @mixin animate-rotateInRight(
99
+ $sub : all,
100
+ $class : $default-animation-class-mode,
101
+ $keyframes : $default-keyframes-output
102
+ ) {
81
103
  $sub : compact($sub);
82
104
  $up : yepnope($sub, all up);
83
105
  $down : yepnope($sub, all down);
84
- @if $up { @include animate-rotateInUpRight ($class); }
85
- @if $down { @include animate-rotateInDownRight ($class); }
106
+ @if $up { @include animate-rotateInUpRight ($class, $keyframes); }
107
+ @if $down { @include animate-rotateInDownRight ($class, $keyframes); }
86
108
  }
87
109
 
88
110
  // ---------------------------------------------------------------------------
89
111
  // rotateInDownLeft
90
112
 
91
- @mixin animate-rotateInDownLeft($class: $default-animation-class-mode) {
113
+ @mixin animate-rotateInDownLeft(
114
+ $class : $default-animation-class-mode,
115
+ $keyframes : $default-keyframes-output
116
+ ) {
92
117
  $name: rotateInDownLeft;
93
- @include keyframes($name) {
94
- 0% {
95
- @include transform-origin(left, bottom);
96
- @include rotate(-90deg);
97
- opacity: 0;
118
+ @if $keyframes {
119
+ @include keyframes($name) {
120
+ 0% {
121
+ @include transform-origin(left, bottom);
122
+ @include rotate(-90deg);
123
+ opacity: 0;
124
+ }
125
+ 100% {
126
+ @include transform-origin(left, bottom);
127
+ @include rotate(0);
128
+ opacity: 1;
129
+ }
98
130
  }
99
- 100% {
100
- @include transform-origin(left, bottom);
101
- @include rotate(0);
102
- opacity: 1;
103
- }
104
131
  }
105
132
  @include animation-class($name, $class) {}
106
133
  }
@@ -108,19 +135,24 @@
108
135
  // ---------------------------------------------------------------------------
109
136
  // rotateInUpLeft
110
137
 
111
- @mixin animate-rotateInUpLeft($class: $default-animation-class-mode) {
138
+ @mixin animate-rotateInUpLeft(
139
+ $class : $default-animation-class-mode,
140
+ $keyframes : $default-keyframes-output
141
+ ) {
112
142
  $name: rotateInUpLeft;
113
- @include keyframes($name) {
114
- 0% {
115
- @include transform-origin(left, bottom);
116
- @include rotate(90deg);
117
- opacity: 0;
143
+ @if $keyframes {
144
+ @include keyframes($name) {
145
+ 0% {
146
+ @include transform-origin(left, bottom);
147
+ @include rotate(90deg);
148
+ opacity: 0;
149
+ }
150
+ 100% {
151
+ @include transform-origin(left, bottom);
152
+ @include rotate(0);
153
+ opacity: 1;
154
+ }
118
155
  }
119
- 100% {
120
- @include transform-origin(left, bottom);
121
- @include rotate(0);
122
- opacity: 1;
123
- }
124
156
  }
125
157
  @include animation-class($name, $class) {}
126
158
  }
@@ -128,19 +160,24 @@
128
160
  // ---------------------------------------------------------------------------
129
161
  // rotateInUpRight
130
162
 
131
- @mixin animate-rotateInUpRight($class: $default-animation-class-mode) {
163
+ @mixin animate-rotateInUpRight(
164
+ $class : $default-animation-class-mode,
165
+ $keyframes : $default-keyframes-output
166
+ ) {
132
167
  $name: rotateInUpRight;
133
- @include keyframes($name) {
134
- 0% {
135
- @include transform-origin(right, bottom);
136
- @include rotate(-90deg);
137
- opacity: 0;
168
+ @if $keyframes {
169
+ @include keyframes($name) {
170
+ 0% {
171
+ @include transform-origin(right, bottom);
172
+ @include rotate(-90deg);
173
+ opacity: 0;
174
+ }
175
+ 100% {
176
+ @include transform-origin(right, bottom);
177
+ @include rotate(0);
178
+ opacity: 1;
179
+ }
138
180
  }
139
- 100% {
140
- @include transform-origin(right, bottom);
141
- @include rotate(0);
142
- opacity: 1;
143
- }
144
181
  }
145
182
  @include animation-class($name, $class) {}
146
183
  }
@@ -148,19 +185,24 @@
148
185
  // ---------------------------------------------------------------------------
149
186
  // rotateInDownRight
150
187
 
151
- @mixin animate-rotateInDownRight($class: $default-animation-class-mode) {
188
+ @mixin animate-rotateInDownRight(
189
+ $class : $default-animation-class-mode,
190
+ $keyframes : $default-keyframes-output
191
+ ) {
152
192
  $name: rotateInDownRight;
153
- @include keyframes($name) {
154
- 0% {
155
- @include transform-origin(right, bottom);
156
- @include rotate(90deg);
157
- opacity: 0;
193
+ @if $keyframes {
194
+ @include keyframes($name) {
195
+ 0% {
196
+ @include transform-origin(right, bottom);
197
+ @include rotate(90deg);
198
+ opacity: 0;
199
+ }
200
+ 100% {
201
+ @include transform-origin(right, bottom);
202
+ @include rotate(0);
203
+ opacity: 1;
204
+ }
158
205
  }
159
- 100% {
160
- @include transform-origin(right, bottom);
161
- @include rotate(0);
162
- opacity: 1;
163
- }
164
206
  }
165
207
  @include animation-class($name, $class) {}
166
208
  }
data/stylesheets/animate/rotate/_rotateOut.scss CHANGED
@@ -6,10 +6,14 @@
6
6
  @import "compass/css3/opacity";
7
7
 
8
8
  // ---------------------------------------------------------------------------
9
- // rotateOut [ only | up | down | left | right |
9
+ // rotateOut [ only | up | down | left | right |
10
10
  // downLeft | downRight | upLeft | upRight | all ]
11
11
 
12
- @mixin animate-rotateOut($sub: all, $class: $default-animation-class-mode) {
12
+ @mixin animate-rotateOut(
13
+ $sub : all,
14
+ $class : $default-animation-class-mode,
15
+ $keyframes : $default-keyframes-output
16
+ ) {
13
17
  $sub : compact($sub);
14
18
  $only : yepnope($sub, all only);
15
19
  $downLeft : yepnope($sub, all down left downLeft);
@@ -17,23 +21,25 @@
17
21
  $upLeft : yepnope($sub, all up left upLeft);
18
22
  $upRight : yepnope($sub, all up right upRight);
19
23
 
20
- @if $downLeft { @include animate-rotateOutDownLeft ($class); }
21
- @if $downRight { @include animate-rotateOutDownRight ($class); }
22
- @if $upLeft { @include animate-rotateOutUpLeft ($class); }
23
- @if $upRight { @include animate-rotateOutUpRight ($class); }
24
+ @if $downLeft { @include animate-rotateOutDownLeft ($class, $keyframes); }
25
+ @if $downRight { @include animate-rotateOutDownRight ($class, $keyframes); }
26
+ @if $upLeft { @include animate-rotateOutUpLeft ($class, $keyframes); }
27
+ @if $upRight { @include animate-rotateOutUpRight ($class, $keyframes); }
24
28
 
25
29
  $name: rotateOut;
26
30
  @if $only {
27
- @include keyframes($name) {
28
- 0% {
29
- @include transform-origin(center, center);
30
- @include rotate(0);
31
- opacity: 1;
32
- }
33
- 100% {
34
- @include transform-origin(center, center);
35
- @include rotate(200deg);
36
- opacity: 0;
31
+ @if $keyframes {
32
+ @include keyframes($name) {
33
+ 0% {
34
+ @include transform-origin(center, center);
35
+ @include rotate(0);
36
+ opacity: 1;
37
+ }
38
+ 100% {
39
+ @include transform-origin(center, center);
40
+ @include rotate(200deg);
41
+ opacity: 0;
42
+ }
37
43
  }
38
44
  }
39
45
  @include animation-class($name, $class) {}
@@ -43,64 +49,85 @@
43
49
  // ---------------------------------------------------------------------------
44
50
  // rotateOutUp [ left | right | all ]
45
51
 
46
- @mixin animate-rotateOutUp($sub: all, $class: $default-animation-class-mode) {
52
+ @mixin animate-rotateOutUp(
53
+ $sub : all,
54
+ $class : $default-animation-class-mode,
55
+ $keyframes : $default-keyframes-output
56
+ ) {
47
57
  $sub : compact($sub);
48
58
  $left : yepnope($sub, all left);
49
59
  $right : yepnope($sub, all right);
50
- @if $left { @include animate-rotateOutUpLeft ($class); }
51
- @if $right { @include animate-rotateOutUpRight ($class); }
60
+ @if $left { @include animate-rotateOutUpLeft ($class, $keyframes); }
61
+ @if $right { @include animate-rotateOutUpRight ($class, $keyframes); }
52
62
  }
53
63
 
54
64
  // ---------------------------------------------------------------------------
55
65
  // rotateOutDown [ left | right | all ]
56
66
 
57
- @mixin animate-rotateOutDown($sub: all, $class: $default-animation-class-mode) {
67
+ @mixin animate-rotateOutDown(
68
+ $sub : all,
69
+ $class : $default-animation-class-mode,
70
+ $keyframes : $default-keyframes-output
71
+ ) {
58
72
  $sub : compact($sub);
59
73
  $left : yepnope($sub, all left);
60
74
  $right : yepnope($sub, all right);
61
- @if $left { @include animate-rotateOutDownLeft ($class); }
62
- @if $right { @include animate-rotateOutDownRight ($class); }
75
+ @if $left { @include animate-rotateOutDownLeft ($class, $keyframes); }
76
+ @if $right { @include animate-rotateOutDownRight ($class, $keyframes); }
63
77
  }
64
78
 
65
79
 
66
80
  // ---------------------------------------------------------------------------
67
81
  // rotateOutLeft [ up | down | all ]
68
82
 
69
- @mixin animate-rotateOutLeft($sub: all, $class: $default-animation-class-mode) {
83
+ @mixin animate-rotateOutLeft(
84
+ $sub : all,
85
+ $class : $default-animation-class-mode,
86
+ $keyframes : $default-keyframes-output
87
+ ) {
70
88
  $sub : compact($sub);
71
89
  $up : yepnope($sub, all up);
72
90
  $down : yepnope($sub, all down);
73
- @if $up { @include animate-rotateOutUpLeft ($class); }
74
- @if $down { @include animate-rotateOutDownLeft ($class); }
91
+ @if $up { @include animate-rotateOutUpLeft ($class, $keyframes); }
92
+ @if $down { @include animate-rotateOutDownLeft ($class, $keyframes); }
75
93
  }
76
94
 
77
95
  // ---------------------------------------------------------------------------
78
96
  // rotateOutRight [ up | down | all ]
79
97
 
80
- @mixin animate-rotateOutRight($sub: all, $class: $default-animation-class-mode) {
98
+ @mixin animate-rotateOutRight(
99
+ $sub : all,
100
+ $class : $default-animation-class-mode,
101
+ $keyframes : $default-keyframes-output
102
+ ) {
81
103
  $sub : compact($sub);
82
104
  $up : yepnope($sub, all up);
83
105
  $down : yepnope($sub, all down);
84
- @if $up { @include animate-rotateOutUpRight ($class); }
85
- @if $down { @include animate-rotateOutDownRight ($class); }
106
+ @if $up { @include animate-rotateOutUpRight ($class, $keyframes); }
107
+ @if $down { @include animate-rotateOutDownRight ($class, $keyframes); }
86
108
  }
87
109
 
88
110
  // ---------------------------------------------------------------------------
89
111
  // rotateOutDownLeft
90
112
 
91
- @mixin animate-rotateOutDownLeft($class: $default-animation-class-mode) {
113
+ @mixin animate-rotateOutDownLeft(
114
+ $class : $default-animation-class-mode,
115
+ $keyframes : $default-keyframes-output
116
+ ) {
92
117
  $name: rotateOutDownLeft;
93
- @include keyframes($name) {
94
- 0% {
95
- @include transform-origin(left, bottom);
96
- @include rotate(0);
97
- opacity: 1;
118
+ @if $keyframes {
119
+ @include keyframes($name) {
120
+ 0% {
121
+ @include transform-origin(left, bottom);
122
+ @include rotate(0);
123
+ opacity: 1;
124
+ }
125
+ 100% {
126
+ @include transform-origin(left, bottom);
127
+ @include rotate(90deg);
128
+ opacity: 0;
129
+ }
98
130
  }
99
- 100% {
100
- @include transform-origin(left, bottom);
101
- @include rotate(90deg);
102
- opacity: 0;
103
- }
104
131
  }
105
132
  @include animation-class($name, $class) {}
106
133
  }
@@ -108,19 +135,24 @@
108
135
  // ---------------------------------------------------------------------------
109
136
  // rotateOutUpLeft
110
137
 
111
- @mixin animate-rotateOutUpLeft($class: $default-animation-class-mode) {
138
+ @mixin animate-rotateOutUpLeft(
139
+ $class : $default-animation-class-mode,
140
+ $keyframes : $default-keyframes-output
141
+ ) {
112
142
  $name: rotateOutUpLeft;
113
- @include keyframes($name) {
114
- 0% {
115
- @include transform-origin(left, bottom);
116
- @include rotate(0);
117
- opacity: 1;
143
+ @if $keyframes {
144
+ @include keyframes($name) {
145
+ 0% {
146
+ @include transform-origin(left, bottom);
147
+ @include rotate(0);
148
+ opacity: 1;
149
+ }
150
+ 100% {
151
+ @include transform-origin(left, bottom);
152
+ @include rotate(-90deg);
153
+ opacity: 0;
154
+ }
118
155
  }
119
- 100% {
120
- @include transform-origin(left, bottom);
121
- @include rotate(-90deg);
122
- opacity: 0;
123
- }
124
156
  }
125
157
  @include animation-class($name, $class) {}
126
158
  }
@@ -128,19 +160,24 @@
128
160
  // ---------------------------------------------------------------------------
129
161
  // rotateOutDownRight
130
162
 
131
- @mixin animate-rotateOutDownRight($class: $default-animation-class-mode) {
163
+ @mixin animate-rotateOutDownRight(
164
+ $class : $default-animation-class-mode,
165
+ $keyframes : $default-keyframes-output
166
+ ) {
132
167
  $name: rotateOutDownRight;
133
- @include keyframes($name) {
134
- 0% {
135
- @include transform-origin(right, bottom);
136
- @include rotate(0);
137
- opacity: 1;
168
+ @if $keyframes {
169
+ @include keyframes($name) {
170
+ 0% {
171
+ @include transform-origin(right, bottom);
172
+ @include rotate(0);
173
+ opacity: 1;
174
+ }
175
+ 100% {
176
+ @include transform-origin(right, bottom);
177
+ @include rotate(-90deg);
178
+ opacity: 0;
179
+ }
138
180
  }
139
- 100% {
140
- @include transform-origin(right, bottom);
141
- @include rotate(-90deg);
142
- opacity: 0;
143
- }
144
181
  }
145
182
  @include animation-class($name, $class) {}
146
183
  }
@@ -148,19 +185,24 @@
148
185
  // ---------------------------------------------------------------------------
149
186
  // rotateOutUpRight
150
187
 
151
- @mixin animate-rotateOutUpRight($class: $default-animation-class-mode) {
188
+ @mixin animate-rotateOutUpRight(
189
+ $class : $default-animation-class-mode,
190
+ $keyframes : $default-keyframes-output
191
+ ) {
152
192
  $name: rotateOutUpRight;
153
- @include keyframes($name) {
154
- 0% {
155
- @include transform-origin(right, bottom);
156
- @include rotate(0);
157
- opacity: 1;
193
+ @if $keyframes {
194
+ @include keyframes($name) {
195
+ 0% {
196
+ @include transform-origin(right, bottom);
197
+ @include rotate(0);
198
+ opacity: 1;
199
+ }
200
+ 100% {
201
+ @include transform-origin(right, bottom);
202
+ @include rotate(90deg);
203
+ opacity: 0;
204
+ }
158
205
  }
159
- 100% {
160
- @include transform-origin(right, bottom);
161
- @include rotate(90deg);
162
- opacity: 0;
163
- }
164
206
  }
165
207
  @include animation-class($name, $class) {}
166
208
  }