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.
- data/stylesheets/_animate.scss +15 -9
- data/stylesheets/_helpers.scss +10 -6
- data/stylesheets/animate/_attention.scss +13 -9
- data/stylesheets/animate/_bounce.scss +40 -34
- data/stylesheets/animate/_fade.scss +25 -21
- data/stylesheets/animate/_flip.scss +47 -33
- data/stylesheets/animate/_lightSpeed.scss +7 -3
- data/stylesheets/animate/_roll.scss +7 -3
- data/stylesheets/animate/_rotate.scss +17 -14
- data/stylesheets/animate/_special.scss +6 -2
- data/stylesheets/animate/attention/_flash.scss +21 -16
- data/stylesheets/animate/attention/_pulse.scss +15 -10
- data/stylesheets/animate/attention/_shake.scss +39 -34
- data/stylesheets/animate/attention/_swing.scss +24 -19
- data/stylesheets/animate/attention/_tada.scss +38 -33
- data/stylesheets/animate/attention/_wiggle.scss +39 -34
- data/stylesheets/animate/attention/_wobble.scss +27 -22
- data/stylesheets/animate/bounce/_bounceIn.scss +100 -75
- data/stylesheets/animate/bounce/_bounceOut.scss +88 -63
- data/stylesheets/animate/fade/_fadeIn.scss +133 -88
- data/stylesheets/animate/fade/_fadeOut.scss +133 -88
- data/stylesheets/animate/flip/_flipIn.scss +47 -33
- data/stylesheets/animate/flip/_flipOut.scss +35 -21
- data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss +22 -17
- data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss +14 -9
- data/stylesheets/animate/roll/_rollIn.scss +14 -9
- data/stylesheets/animate/roll/_rollOut.scss +13 -8
- data/stylesheets/animate/rotate/_rotateIn.scss +114 -72
- data/stylesheets/animate/rotate/_rotateOut.scss +114 -72
- data/stylesheets/animate/special/_hinge.scss +32 -27
- metadata +10 -7
@@ -8,14 +8,19 @@
|
|
8
8
|
// ---------------------------------------------------------------------------
|
9
9
|
// fadeOut
|
10
10
|
|
11
|
-
@mixin animate-fadeOut(
|
12
|
-
$
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
11
|
+
@mixin animate-fadeOut(
|
12
|
+
$class : $default-animation-class-mode,
|
13
|
+
$keyframes : $default-keyframes-output
|
14
|
+
) {
|
15
|
+
$name: fadeOut;
|
16
|
+
@if $keyframes {
|
17
|
+
@include keyframes($name) {
|
18
|
+
0% {
|
19
|
+
opacity: 1;
|
20
|
+
}
|
21
|
+
100% {
|
22
|
+
opacity: 0;
|
23
|
+
}
|
19
24
|
}
|
20
25
|
}
|
21
26
|
@include animation-class($name, $class) {}
|
@@ -24,17 +29,22 @@
|
|
24
29
|
// ---------------------------------------------------------------------------
|
25
30
|
// fadeOutUp
|
26
31
|
|
27
|
-
@mixin animate-fadeOutUp(
|
28
|
-
$
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
32
|
+
@mixin animate-fadeOutUp(
|
33
|
+
$class : $default-animation-class-mode,
|
34
|
+
$keyframes : $default-keyframes-output
|
35
|
+
) {
|
36
|
+
$name: fadeOutUp;
|
37
|
+
@if $keyframes {
|
38
|
+
@include keyframes($name) {
|
39
|
+
0% {
|
40
|
+
@include translateY(0);
|
41
|
+
opacity: 1;
|
42
|
+
}
|
43
|
+
100% {
|
44
|
+
@include translateY(-20px);
|
45
|
+
opacity: 0;
|
46
|
+
}
|
33
47
|
}
|
34
|
-
100% {
|
35
|
-
@include translateY(-20px);
|
36
|
-
opacity: 0;
|
37
|
-
}
|
38
48
|
}
|
39
49
|
@include animation-class($name, $class) {}
|
40
50
|
}
|
@@ -42,17 +52,22 @@
|
|
42
52
|
// ---------------------------------------------------------------------------
|
43
53
|
// fadeOutDown
|
44
54
|
|
45
|
-
@mixin animate-fadeOutDown(
|
46
|
-
$
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
55
|
+
@mixin animate-fadeOutDown(
|
56
|
+
$class : $default-animation-class-mode,
|
57
|
+
$keyframes : $default-keyframes-output
|
58
|
+
) {
|
59
|
+
$name: fadeOutDown;
|
60
|
+
@if $keyframes {
|
61
|
+
@include keyframes($name) {
|
62
|
+
0% {
|
63
|
+
@include translateY(0);
|
64
|
+
opacity: 1;
|
65
|
+
}
|
66
|
+
100% {
|
67
|
+
@include translateY(20px);
|
68
|
+
opacity: 0;
|
69
|
+
}
|
51
70
|
}
|
52
|
-
100% {
|
53
|
-
@include translateY(20px);
|
54
|
-
opacity: 0;
|
55
|
-
}
|
56
71
|
}
|
57
72
|
@include animation-class($name, $class) {}
|
58
73
|
}
|
@@ -60,17 +75,22 @@
|
|
60
75
|
// ---------------------------------------------------------------------------
|
61
76
|
// fadeOutRight
|
62
77
|
|
63
|
-
@mixin animate-fadeOutRight(
|
64
|
-
$
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
78
|
+
@mixin animate-fadeOutRight(
|
79
|
+
$class : $default-animation-class-mode,
|
80
|
+
$keyframes : $default-keyframes-output
|
81
|
+
) {
|
82
|
+
$name: fadeOutRight;
|
83
|
+
@if $keyframes {
|
84
|
+
@include keyframes($name) {
|
85
|
+
0% {
|
86
|
+
@include translateX(0);
|
87
|
+
opacity: 1;
|
88
|
+
}
|
89
|
+
100% {
|
90
|
+
@include translateX(20px);
|
91
|
+
opacity: 0;
|
92
|
+
}
|
69
93
|
}
|
70
|
-
100% {
|
71
|
-
@include translateX(20px);
|
72
|
-
opacity: 0;
|
73
|
-
}
|
74
94
|
}
|
75
95
|
@include animation-class($name, $class) {}
|
76
96
|
}
|
@@ -78,17 +98,22 @@
|
|
78
98
|
// ---------------------------------------------------------------------------
|
79
99
|
// fadeOutLeft
|
80
100
|
|
81
|
-
@mixin animate-fadeOutLeft(
|
82
|
-
$
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
101
|
+
@mixin animate-fadeOutLeft(
|
102
|
+
$class : $default-animation-class-mode,
|
103
|
+
$keyframes : $default-keyframes-output
|
104
|
+
) {
|
105
|
+
$name: fadeOutLeft;
|
106
|
+
@if $keyframes {
|
107
|
+
@include keyframes($name) {
|
108
|
+
0% {
|
109
|
+
@include translateX(0);
|
110
|
+
opacity: 1;
|
111
|
+
}
|
112
|
+
100% {
|
113
|
+
@include translateX(-20px);
|
114
|
+
opacity: 0;
|
115
|
+
}
|
87
116
|
}
|
88
|
-
100% {
|
89
|
-
@include translateX(-20px);
|
90
|
-
opacity: 0;
|
91
|
-
}
|
92
117
|
}
|
93
118
|
@include animation-class($name, $class) {}
|
94
119
|
}
|
@@ -96,17 +121,22 @@
|
|
96
121
|
// ---------------------------------------------------------------------------
|
97
122
|
// fadeOutUpBig
|
98
123
|
|
99
|
-
@mixin animate-fadeOutUpBig(
|
100
|
-
$
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
124
|
+
@mixin animate-fadeOutUpBig(
|
125
|
+
$class : $default-animation-class-mode,
|
126
|
+
$keyframes : $default-keyframes-output
|
127
|
+
) {
|
128
|
+
$name: fadeOutUpBig;
|
129
|
+
@if $keyframes {
|
130
|
+
@include keyframes($name) {
|
131
|
+
0% {
|
132
|
+
@include translateY(0);
|
133
|
+
opacity: 1;
|
134
|
+
}
|
135
|
+
100% {
|
136
|
+
@include translateY(-2000px);
|
137
|
+
opacity: 0;
|
138
|
+
}
|
105
139
|
}
|
106
|
-
100% {
|
107
|
-
@include translateY(-2000px);
|
108
|
-
opacity: 0;
|
109
|
-
}
|
110
140
|
}
|
111
141
|
@include animation-class($name, $class) {}
|
112
142
|
}
|
@@ -114,17 +144,22 @@
|
|
114
144
|
// ---------------------------------------------------------------------------
|
115
145
|
// fadeOutDownBig
|
116
146
|
|
117
|
-
@mixin animate-fadeOutDownBig(
|
118
|
-
$
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
147
|
+
@mixin animate-fadeOutDownBig(
|
148
|
+
$class : $default-animation-class-mode,
|
149
|
+
$keyframes : $default-keyframes-output
|
150
|
+
) {
|
151
|
+
$name: fadeOutDownBig;
|
152
|
+
@if $keyframes {
|
153
|
+
@include keyframes($name) {
|
154
|
+
0% {
|
155
|
+
opacity: 1;
|
156
|
+
@include translateY(0);
|
157
|
+
}
|
158
|
+
100% {
|
159
|
+
opacity: 0;
|
160
|
+
@include translateY(2000px);
|
161
|
+
}
|
123
162
|
}
|
124
|
-
100% {
|
125
|
-
opacity: 0;
|
126
|
-
@include translateY(2000px);
|
127
|
-
}
|
128
163
|
}
|
129
164
|
@include animation-class($name, $class) {}
|
130
165
|
}
|
@@ -132,17 +167,22 @@
|
|
132
167
|
// ---------------------------------------------------------------------------
|
133
168
|
// fadeOutRightBig
|
134
169
|
|
135
|
-
@mixin animate-fadeOutRightBig(
|
136
|
-
$
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
170
|
+
@mixin animate-fadeOutRightBig(
|
171
|
+
$class : $default-animation-class-mode,
|
172
|
+
$keyframes : $default-keyframes-output
|
173
|
+
) {
|
174
|
+
$name: fadeOutRightBig;
|
175
|
+
@if $keyframes {
|
176
|
+
@include keyframes($name) {
|
177
|
+
0% {
|
178
|
+
opacity: 1;
|
179
|
+
@include translateX(0);
|
180
|
+
}
|
181
|
+
100% {
|
182
|
+
opacity: 0;
|
183
|
+
@include translateX(2000px);
|
184
|
+
}
|
141
185
|
}
|
142
|
-
100% {
|
143
|
-
opacity: 0;
|
144
|
-
@include translateX(2000px);
|
145
|
-
}
|
146
186
|
}
|
147
187
|
@include animation-class($name, $class) {}
|
148
188
|
}
|
@@ -150,17 +190,22 @@
|
|
150
190
|
// ---------------------------------------------------------------------------
|
151
191
|
// fadeOutLeftBig
|
152
192
|
|
153
|
-
@mixin animate-fadeOutLeftBig(
|
154
|
-
$
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
193
|
+
@mixin animate-fadeOutLeftBig(
|
194
|
+
$class : $default-animation-class-mode,
|
195
|
+
$keyframes : $default-keyframes-output
|
196
|
+
) {
|
197
|
+
$name: fadeOutLeftBig;
|
198
|
+
@if $keyframes {
|
199
|
+
@include keyframes($name) {
|
200
|
+
0% {
|
201
|
+
opacity: 1;
|
202
|
+
@include translateX(0);
|
203
|
+
}
|
204
|
+
100% {
|
205
|
+
opacity: 0;
|
206
|
+
@include translateX(-2000px);
|
207
|
+
}
|
159
208
|
}
|
160
|
-
100% {
|
161
|
-
opacity: 0;
|
162
|
-
@include translateX(-2000px);
|
163
|
-
}
|
164
209
|
}
|
165
210
|
@include animation-class($name, $class) {}
|
166
211
|
}
|
@@ -7,33 +7,42 @@
|
|
7
7
|
// ---------------------------------------------------------------------------
|
8
8
|
// flipIn [ x | y | all ]
|
9
9
|
|
10
|
-
@mixin animate-flipIn(
|
10
|
+
@mixin animate-flipIn(
|
11
|
+
$sub : all,
|
12
|
+
$class : $default-animation-class-mode,
|
13
|
+
$keyframes : $default-keyframes-output
|
14
|
+
) {
|
11
15
|
$sub : compact($sub);
|
12
16
|
$x : yepnope($sub, all x);
|
13
17
|
$y : yepnope($sub, all y);
|
14
|
-
@if $x { @include animate-flipInX (all, $class); }
|
15
|
-
@if $y { @include animate-flipInY (all, $class); }
|
18
|
+
@if $x { @include animate-flipInX (all, $class, $keyframes); }
|
19
|
+
@if $y { @include animate-flipInY (all, $class, $keyframes); }
|
16
20
|
}
|
17
21
|
|
18
22
|
// ---------------------------------------------------------------------------
|
19
23
|
// flipInX
|
20
24
|
|
21
|
-
@mixin animate-flipInX(
|
25
|
+
@mixin animate-flipInX(
|
26
|
+
$class : $default-animation-class-mode,
|
27
|
+
$keyframes : $default-keyframes-output
|
28
|
+
) {
|
22
29
|
$name: flipInX;
|
23
|
-
@
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
30
|
+
@if $keyframes {
|
31
|
+
@include keyframes($name) {
|
32
|
+
0% {
|
33
|
+
@include transform(perspective(400px) rotateX(90deg));
|
34
|
+
@include opacity(0);
|
35
|
+
}
|
36
|
+
40% {
|
37
|
+
@include transform(perspective(400px) rotateX(-10deg));
|
38
|
+
}
|
39
|
+
70% {
|
40
|
+
@include transform(perspective(400px) rotateX(10deg));
|
41
|
+
}
|
42
|
+
100% {
|
43
|
+
@include transform(perspective(400px) rotateX(0deg));
|
44
|
+
@include opacity(1);
|
45
|
+
}
|
37
46
|
}
|
38
47
|
}
|
39
48
|
@include flip-class($name, $class);
|
@@ -42,22 +51,27 @@
|
|
42
51
|
// ---------------------------------------------------------------------------
|
43
52
|
// flipInY
|
44
53
|
|
45
|
-
@mixin animate-flipInY(
|
54
|
+
@mixin animate-flipInY(
|
55
|
+
$class : $default-animation-class-mode,
|
56
|
+
$keyframes : $default-keyframes-output
|
57
|
+
) {
|
46
58
|
$name: flipInY;
|
47
|
-
@
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
59
|
+
@if $keyframes {
|
60
|
+
@include keyframes($name) {
|
61
|
+
0% {
|
62
|
+
@include transform(perspective(400px) rotateY(90deg));
|
63
|
+
@include opacity(0);
|
64
|
+
}
|
65
|
+
40% {
|
66
|
+
@include transform(perspective(400px) rotateY(-10deg));
|
67
|
+
}
|
68
|
+
70% {
|
69
|
+
@include transform(perspective(400px) rotateY(10deg));
|
70
|
+
}
|
71
|
+
100% {
|
72
|
+
@include transform(perspective(400px) rotateY(0deg));
|
73
|
+
@include opacity(1);
|
74
|
+
}
|
61
75
|
}
|
62
76
|
}
|
63
77
|
@include flip-class($name, $class);
|
@@ -7,27 +7,36 @@
|
|
7
7
|
// ---------------------------------------------------------------------------
|
8
8
|
// flipOut [ x | y | all ]
|
9
9
|
|
10
|
-
@mixin animate-flipOut(
|
10
|
+
@mixin animate-flipOut(
|
11
|
+
$sub : all,
|
12
|
+
$class : $default-animation-class-mode,
|
13
|
+
$keyframes : $default-keyframes-output
|
14
|
+
) {
|
11
15
|
$sub : compact($sub);
|
12
16
|
$x : yepnope($sub, all x);
|
13
17
|
$y : yepnope($sub, all y);
|
14
|
-
@if $x { @include animate-flipOutX (all, $class); }
|
15
|
-
@if $y { @include animate-flipOutY (all, $class); }
|
18
|
+
@if $x { @include animate-flipOutX (all, $class, $keyframes); }
|
19
|
+
@if $y { @include animate-flipOutY (all, $class, $keyframes); }
|
16
20
|
}
|
17
21
|
|
18
22
|
// ---------------------------------------------------------------------------
|
19
23
|
// flipOutX
|
20
24
|
|
21
|
-
@mixin animate-flipOutX(
|
25
|
+
@mixin animate-flipOutX(
|
26
|
+
$class : $default-animation-class-mode,
|
27
|
+
$keyframes : $default-keyframes-output
|
28
|
+
) {
|
22
29
|
$name: flipOutX;
|
23
|
-
@
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
30
|
+
@if $keyframes {
|
31
|
+
@include keyframes($name) {
|
32
|
+
0% {
|
33
|
+
@include transform(perspective(400px) rotateX(0deg));
|
34
|
+
@include opacity(1);
|
35
|
+
}
|
36
|
+
100% {
|
37
|
+
@include transform(perspective(400px) rotateX(90deg));
|
38
|
+
@include opacity(0);
|
39
|
+
}
|
31
40
|
}
|
32
41
|
}
|
33
42
|
@include flip-class($name, $class);
|
@@ -36,16 +45,21 @@
|
|
36
45
|
// ---------------------------------------------------------------------------
|
37
46
|
// flipOutY
|
38
47
|
|
39
|
-
@mixin animate-flipOutY(
|
48
|
+
@mixin animate-flipOutY(
|
49
|
+
$class : $default-animation-class-mode,
|
50
|
+
$keyframes : $default-keyframes-output
|
51
|
+
) {
|
40
52
|
$name: flipOutY;
|
41
|
-
@
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
53
|
+
@if $keyframes {
|
54
|
+
@include keyframes($name) {
|
55
|
+
0% {
|
56
|
+
@include transform(perspective(400px) rotateY(0deg));
|
57
|
+
@include opacity(1);
|
58
|
+
}
|
59
|
+
100% {
|
60
|
+
@include transform(perspective(400px) rotateY(90deg));
|
61
|
+
@include opacity(0);
|
62
|
+
}
|
49
63
|
}
|
50
64
|
}
|
51
65
|
@include flip-class($name, $class);
|