compass-animate 0.0.1
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/README.md +33 -0
- data/lib/animate.rb +3 -0
- data/stylesheets/_animate.scss +234 -0
- data/stylesheets/animate/bounce.scss +37 -0
- data/stylesheets/animate/bounceIn.scss +43 -0
- data/stylesheets/animate/bounceInDown.scss +43 -0
- data/stylesheets/animate/bounceInLeft.scss +43 -0
- data/stylesheets/animate/bounceInRight.scss +43 -0
- data/stylesheets/animate/bounceInUp.scss +43 -0
- data/stylesheets/animate/bounceOut.scss +43 -0
- data/stylesheets/animate/bounceOutDown.scss +38 -0
- data/stylesheets/animate/bounceOutLeft.scss +38 -0
- data/stylesheets/animate/bounceOutRight.scss +38 -0
- data/stylesheets/animate/bounceOutUp.scss +38 -0
- data/stylesheets/animate/fadeIn.scss +33 -0
- data/stylesheets/animate/fadeInDown.scss +33 -0
- data/stylesheets/animate/fadeInDownBig.scss +33 -0
- data/stylesheets/animate/fadeInLeft.scss +33 -0
- data/stylesheets/animate/fadeInLeftBig.scss +33 -0
- data/stylesheets/animate/fadeInRight.scss +33 -0
- data/stylesheets/animate/fadeInRightBig.scss +33 -0
- data/stylesheets/animate/fadeInUp.scss +33 -0
- data/stylesheets/animate/fadeInUpBig.scss +33 -0
- data/stylesheets/animate/fadeOut.scss +33 -0
- data/stylesheets/animate/fadeOutDown.scss +33 -0
- data/stylesheets/animate/fadeOutDownBig.scss +33 -0
- data/stylesheets/animate/fadeOutLeft.scss +33 -0
- data/stylesheets/animate/fadeOutLeftBig.scss +33 -0
- data/stylesheets/animate/fadeOutRight.scss +33 -0
- data/stylesheets/animate/fadeOutRightBig.scss +33 -0
- data/stylesheets/animate/fadeOutUp.scss +33 -0
- data/stylesheets/animate/fadeOutUpBig.scss +28 -0
- data/stylesheets/animate/flash.scss +33 -0
- data/stylesheets/animate/flip.scss +41 -0
- data/stylesheets/animate/flipInX.scss +33 -0
- data/stylesheets/animate/flipInY.scss +39 -0
- data/stylesheets/animate/flipOutX.scss +33 -0
- data/stylesheets/animate/flipOutY.scss +29 -0
- data/stylesheets/animate/hinge.scss +48 -0
- data/stylesheets/animate/lightSpeedIn.scss +44 -0
- data/stylesheets/animate/lightSpeedOut.scss +34 -0
- data/stylesheets/animate/properties.scss +78 -0
- data/stylesheets/animate/pulse.scss +40 -0
- data/stylesheets/animate/rollIn.scss +35 -0
- data/stylesheets/animate/rollOut.scss +35 -0
- data/stylesheets/animate/rotateIn.scss +33 -0
- data/stylesheets/animate/rotateInDownLeft.scss +33 -0
- data/stylesheets/animate/rotateInDownRight.scss +32 -0
- data/stylesheets/animate/rotateInUpLeft.scss +33 -0
- data/stylesheets/animate/rotateInUpRight.scss +33 -0
- data/stylesheets/animate/rotateOut.scss +33 -0
- data/stylesheets/animate/rotateOutDownLeft.scss +33 -0
- data/stylesheets/animate/rotateOutDownRight.scss +33 -0
- data/stylesheets/animate/rotateOutUpLeft.scss +33 -0
- data/stylesheets/animate/rotateOutUpRight.scss +33 -0
- data/stylesheets/animate/shake.scss +38 -0
- data/stylesheets/animate/swing.scss +50 -0
- data/stylesheets/animate/tada.scss +48 -0
- data/stylesheets/animate/wiggle.scss +78 -0
- data/stylesheets/animate/wobble.scss +60 -0
- metadata +120 -0
data/README.md
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# animate.scss
|
|
2
|
+
__A port of the core animate.css lib to Sass.__
|
|
3
|
+
|
|
4
|
+
CSS toolkit of CSS animations (http://daneden.me/animate) converted to Sass
|
|
5
|
+
|
|
6
|
+
`animate.scss` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
|
|
7
|
+
|
|
8
|
+
## Usage
|
|
9
|
+
To use animate.css in your website, simply drop the stylesheet into your document's `<head>`, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!
|
|
10
|
+
|
|
11
|
+
You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
$('#yourElement').addClass('animated bounceOutLeft');
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
You can change the duration of your animations, add a delay or change the number of times that it plays!
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
#yourElement {
|
|
21
|
+
-vendor-animation-duration: 3s;
|
|
22
|
+
-vendor-animation-delay: 2s;
|
|
23
|
+
-vendor-animation-iteration-count: infinite;
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, ms, o)*
|
|
28
|
+
|
|
29
|
+
## License
|
|
30
|
+
Animate.css is licensed under the ☺ license. (http://licence.visualidiot.com/)
|
|
31
|
+
|
|
32
|
+
## Learn more
|
|
33
|
+
You can learn more about animate.css over at http://daneden.me/animate
|
data/lib/animate.rb
ADDED
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
$duration: 1s;
|
|
2
|
+
$delay: .2s;
|
|
3
|
+
$function: ease;
|
|
4
|
+
$fill: both;
|
|
5
|
+
$visibility: hidden;
|
|
6
|
+
|
|
7
|
+
@import "animate/properties";
|
|
8
|
+
@import "animate/bounce";
|
|
9
|
+
@import "animate/bounceIn";
|
|
10
|
+
@import "animate/bounceInDown";
|
|
11
|
+
@import "animate/bounceInLeft";
|
|
12
|
+
@import "animate/bounceInRight";
|
|
13
|
+
@import "animate/bounceInUp";
|
|
14
|
+
@import "animate/bounceOut";
|
|
15
|
+
@import "animate/bounceOutDown";
|
|
16
|
+
@import "animate/bounceOutLeft";
|
|
17
|
+
@import "animate/bounceOutRight";
|
|
18
|
+
@import "animate/bounceOutUp";
|
|
19
|
+
@import "animate/fadeIn";
|
|
20
|
+
@import "animate/fadeInDown";
|
|
21
|
+
@import "animate/fadeInDownBig";
|
|
22
|
+
@import "animate/fadeInLeft";
|
|
23
|
+
@import "animate/fadeInLeftBig";
|
|
24
|
+
@import "animate/fadeInRight";
|
|
25
|
+
@import "animate/fadeInRightBig";
|
|
26
|
+
@import "animate/fadeInUp";
|
|
27
|
+
@import "animate/fadeInUpBig";
|
|
28
|
+
@import "animate/fadeOut";
|
|
29
|
+
@import "animate/fadeOutDown";
|
|
30
|
+
@import "animate/fadeOutDownBig";
|
|
31
|
+
@import "animate/fadeOutLeft";
|
|
32
|
+
@import "animate/fadeOutLeftBig";
|
|
33
|
+
@import "animate/fadeOutRight";
|
|
34
|
+
@import "animate/fadeOutRightBig";
|
|
35
|
+
@import "animate/fadeOutUp";
|
|
36
|
+
@import "animate/fadeOutUpBig";
|
|
37
|
+
@import "animate/flash";
|
|
38
|
+
@import "animate/flip";
|
|
39
|
+
@import "animate/flipInX";
|
|
40
|
+
@import "animate/flipInY";
|
|
41
|
+
@import "animate/flipOutX";
|
|
42
|
+
@import "animate/flipOutY";
|
|
43
|
+
@import "animate/hinge";
|
|
44
|
+
@import "animate/lightSpeedIn";
|
|
45
|
+
@import "animate/lightSpeedOut";
|
|
46
|
+
@import "animate/pulse";
|
|
47
|
+
@import "animate/rollIn";
|
|
48
|
+
@import "animate/rollOut";
|
|
49
|
+
@import "animate/rotateIn";
|
|
50
|
+
@import "animate/rotateInDownLeft";
|
|
51
|
+
@import "animate/rotateInDownRight";
|
|
52
|
+
@import "animate/rotateInUpLeft";
|
|
53
|
+
@import "animate/rotateInUpRight";
|
|
54
|
+
@import "animate/rotateOut";
|
|
55
|
+
@import "animate/rotateOutDownLeft";
|
|
56
|
+
@import "animate/rotateOutDownRight";
|
|
57
|
+
@import "animate/rotateOutUpLeft";
|
|
58
|
+
@import "animate/rotateOutUpRight";
|
|
59
|
+
@import "animate/shake";
|
|
60
|
+
@import "animate/swing";
|
|
61
|
+
@import "animate/tada";
|
|
62
|
+
@import "animate/wiggle";
|
|
63
|
+
@import "animate/wobble";
|
|
64
|
+
|
|
65
|
+
.animate{
|
|
66
|
+
&.bounce {
|
|
67
|
+
@include bounce($duration, $delay, $function, $fill, $visibility);
|
|
68
|
+
}
|
|
69
|
+
&.bounceIn {
|
|
70
|
+
@include bounceIn($duration, $delay, $function, $fill, $visibility);
|
|
71
|
+
}
|
|
72
|
+
&.bounceInDown {
|
|
73
|
+
@include bounceInDown($duration, $delay, $function, $fill, $visibility);
|
|
74
|
+
}
|
|
75
|
+
&.bounceInLeft {
|
|
76
|
+
@include bounceInLeft($duration, $delay, $function, $fill, $visibility);
|
|
77
|
+
}
|
|
78
|
+
&.bounceInRight {
|
|
79
|
+
@include bounceInRight($duration, $delay, $function, $fill, $visibility);
|
|
80
|
+
}
|
|
81
|
+
&.bounceInUp {
|
|
82
|
+
@include bounceInUp($duration, $delay, $function, $fill, $visibility);
|
|
83
|
+
}
|
|
84
|
+
&.bounceOut {
|
|
85
|
+
@include bounceOut($duration, $delay, $function, $fill, $visibility);
|
|
86
|
+
}
|
|
87
|
+
&.bounceOutDown {
|
|
88
|
+
@include bounceOutDown($duration, $delay, $function, $fill, $visibility);
|
|
89
|
+
}
|
|
90
|
+
&.bounceOutLeft {
|
|
91
|
+
@include bounceOutLeft($duration, $delay, $function, $fill, $visibility);
|
|
92
|
+
}
|
|
93
|
+
&.bounceOutRight {
|
|
94
|
+
@include bounceOutRight($duration, $delay, $function, $fill, $visibility);
|
|
95
|
+
}
|
|
96
|
+
&.bounceOutUp {
|
|
97
|
+
@include bounceOutUp($duration, $delay, $function, $fill, $visibility);
|
|
98
|
+
}
|
|
99
|
+
&.fadeIn {
|
|
100
|
+
@include fadeIn($duration, $delay, $function, $fill, $visibility);
|
|
101
|
+
}
|
|
102
|
+
&.fadeInDown {
|
|
103
|
+
@include fadeInDown($duration, $delay, $function, $fill, $visibility);
|
|
104
|
+
}
|
|
105
|
+
&.fadeInDownBig {
|
|
106
|
+
@include fadeInDownBig($duration, $delay, $function, $fill, $visibility);
|
|
107
|
+
}
|
|
108
|
+
&.fadeInLeft {
|
|
109
|
+
@include fadeInLeft($duration, $delay, $function, $fill, $visibility);
|
|
110
|
+
}
|
|
111
|
+
&.fadeInLeftBig {
|
|
112
|
+
@include fadeInLeftBig($duration, $delay, $function, $fill, $visibility);
|
|
113
|
+
}
|
|
114
|
+
&.fadeInRight {
|
|
115
|
+
@include fadeInRight($duration, $delay, $function, $fill, $visibility);
|
|
116
|
+
}
|
|
117
|
+
&.fadeInRightBig {
|
|
118
|
+
@include fadeInRightBig($duration, $delay, $function, $fill, $visibility);
|
|
119
|
+
}
|
|
120
|
+
&.fadeInUp {
|
|
121
|
+
@include fadeInUp($duration, $delay, $function, $fill, $visibility);
|
|
122
|
+
}
|
|
123
|
+
&.fadeInUpBig {
|
|
124
|
+
@include fadeInUpBig($duration, $delay, $function, $fill, $visibility);
|
|
125
|
+
}
|
|
126
|
+
&.fadeOut {
|
|
127
|
+
@include fadeOut($duration, $delay, $function, $fill, $visibility);
|
|
128
|
+
}
|
|
129
|
+
&.fadeOutDown {
|
|
130
|
+
@include fadeOutDown($duration, $delay, $function, $fill, $visibility);
|
|
131
|
+
}
|
|
132
|
+
&.fadeOutDownBig {
|
|
133
|
+
@include fadeOutDownBig($duration, $delay, $function, $fill, $visibility);
|
|
134
|
+
}
|
|
135
|
+
&.fadeOutLeft {
|
|
136
|
+
@include fadeOutLeft($duration, $delay, $function, $fill, $visibility);
|
|
137
|
+
}
|
|
138
|
+
&.fadeOutLeftBig {
|
|
139
|
+
@include fadeOutLeftBig($duration, $delay, $function, $fill, $visibility);
|
|
140
|
+
}
|
|
141
|
+
&.fadeOutRight {
|
|
142
|
+
@include fadeOutRight($duration, $delay, $function, $fill, $visibility);
|
|
143
|
+
}
|
|
144
|
+
&.fadeOutRightBig {
|
|
145
|
+
@include fadeOutRightBig($duration, $delay, $function, $fill, $visibility);
|
|
146
|
+
}
|
|
147
|
+
&.fadeOutUp {
|
|
148
|
+
@include fadeOutUp($duration, $delay, $function, $fill, $visibility);
|
|
149
|
+
}
|
|
150
|
+
&.fadeOutUpBig {
|
|
151
|
+
@include fadeOutUpBig($duration, $delay, $function, $fill, $visibility);
|
|
152
|
+
}
|
|
153
|
+
&.flash {
|
|
154
|
+
@include flash($duration, $delay, $function, $fill, $visibility);
|
|
155
|
+
}
|
|
156
|
+
&.flip {
|
|
157
|
+
@include flip($duration, $delay, $function, $fill, $visibility);
|
|
158
|
+
}
|
|
159
|
+
&.flipInX {
|
|
160
|
+
@include flipInX($duration, $delay, $function, $fill, $visibility);
|
|
161
|
+
}
|
|
162
|
+
&.flipInY {
|
|
163
|
+
@include flipInY($duration, $delay, $function, $fill, $visibility);
|
|
164
|
+
}
|
|
165
|
+
&.flipOutX {
|
|
166
|
+
@include flipOutX($duration, $delay, $function, $fill, $visibility);
|
|
167
|
+
}
|
|
168
|
+
&.flipOutY {
|
|
169
|
+
@include flipOutY($duration, $delay, $function, $fill, $visibility);
|
|
170
|
+
}
|
|
171
|
+
&.hinge {
|
|
172
|
+
@include hinge($duration, $delay, $function, $fill, $visibility);
|
|
173
|
+
}
|
|
174
|
+
&.lightSpeedIn {
|
|
175
|
+
@include lightSpeedIn($duration, $delay, $fill, $visibility);
|
|
176
|
+
}
|
|
177
|
+
&.lightSpeedOut {
|
|
178
|
+
@include lightSpeedOut($duration, $delay, $fill, $visibility);
|
|
179
|
+
}
|
|
180
|
+
&.pulse {
|
|
181
|
+
@include pulse($duration, $delay, $function, $fill, $visibility);
|
|
182
|
+
}
|
|
183
|
+
&.rollIn {
|
|
184
|
+
@include rollIn($duration, $delay, $function, $fill, $visibility);
|
|
185
|
+
}
|
|
186
|
+
&.rollOut {
|
|
187
|
+
@include rollOut($duration, $delay, $function, $fill, $visibility);
|
|
188
|
+
}
|
|
189
|
+
&.rotateIn {
|
|
190
|
+
@include rotateIn($duration, $delay, $function, $fill, $visibility);
|
|
191
|
+
}
|
|
192
|
+
&.rotateInDownLeft {
|
|
193
|
+
@include rotateInDownLeft($duration, $delay, $function, $fill, $visibility);
|
|
194
|
+
}
|
|
195
|
+
&.rotateInDownRight {
|
|
196
|
+
@include rotateInDownRight($duration, $delay, $function, $fill, $visibility);
|
|
197
|
+
}
|
|
198
|
+
&.rotateInUpLeft {
|
|
199
|
+
@include rotateInUpLeft($duration, $delay, $function, $fill, $visibility);
|
|
200
|
+
}
|
|
201
|
+
&.rotateInUpRight {
|
|
202
|
+
@include rotateInUpRight($duration, $delay, $function, $fill, $visibility);
|
|
203
|
+
}
|
|
204
|
+
&.rotateOut {
|
|
205
|
+
@include rotateOut($duration, $delay, $function, $fill, $visibility);
|
|
206
|
+
}
|
|
207
|
+
&.rotateOutDownLeft {
|
|
208
|
+
@include rotateOutDownLeft($duration, $delay, $function, $fill, $visibility);
|
|
209
|
+
}
|
|
210
|
+
&.rotateOutDownRight {
|
|
211
|
+
@include rotateOutDownRight($duration, $delay, $function, $fill, $visibility);
|
|
212
|
+
}
|
|
213
|
+
&.rotateOutUpLeft {
|
|
214
|
+
@include rotateOutUpLeft($duration, $delay, $function, $fill, $visibility);
|
|
215
|
+
}
|
|
216
|
+
&.rotateOutUpRight {
|
|
217
|
+
@include rotateOutUpRight($duration, $delay, $function, $fill, $visibility);
|
|
218
|
+
}
|
|
219
|
+
&.shake {
|
|
220
|
+
@include shake($duration, $delay, $function, $fill, $visibility);
|
|
221
|
+
}
|
|
222
|
+
&.swing {
|
|
223
|
+
@include swing($duration, $delay, $function, $fill, $visibility);
|
|
224
|
+
}
|
|
225
|
+
&.tada {
|
|
226
|
+
@include tada($duration, $delay, $function, $fill, $visibility);
|
|
227
|
+
}
|
|
228
|
+
&.wiggle {
|
|
229
|
+
@include wiggle($duration, $delay, $function, $fill, $visibility);
|
|
230
|
+
}
|
|
231
|
+
&.wobble {
|
|
232
|
+
@include wobble($duration, $delay, $function, $fill, $visibility);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@-webkit-keyframes bounce {
|
|
2
|
+
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
|
|
3
|
+
40% {-webkit-transform: translateY(-30px);}
|
|
4
|
+
60% {-webkit-transform: translateY(-15px);}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@-moz-keyframes bounce {
|
|
8
|
+
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
|
|
9
|
+
40% {-moz-transform: translateY(-30px);}
|
|
10
|
+
60% {-moz-transform: translateY(-15px);}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@-ms-keyframes bounce {
|
|
14
|
+
0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
|
|
15
|
+
40% {-ms-transform: translateY(-30px);}
|
|
16
|
+
60% {-ms-transform: translateY(-15px);}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@-o-keyframes bounce {
|
|
20
|
+
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
|
|
21
|
+
40% {-o-transform: translateY(-30px);}
|
|
22
|
+
60% {-o-transform: translateY(-15px);}
|
|
23
|
+
}
|
|
24
|
+
@keyframes bounce {
|
|
25
|
+
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
|
26
|
+
40% {transform: translateY(-30px);}
|
|
27
|
+
60% {transform: translateY(-15px);}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@mixin bounce($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
31
|
+
@include animation-name(bounce);
|
|
32
|
+
@include duration($duration);
|
|
33
|
+
@include delay($delay);
|
|
34
|
+
@include function($function);
|
|
35
|
+
@include fill-mode($fill);
|
|
36
|
+
@include visibility($visibility);
|
|
37
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@-webkit-keyframes bounceIn {
|
|
2
|
+
0% {opacity: 0; -webkit-transform: scale(.3);}
|
|
3
|
+
50% {opacity: 1; -webkit-transform: scale(1.05);}
|
|
4
|
+
70% {-webkit-transform: scale(.9);}
|
|
5
|
+
100% {-webkit-transform: scale(1);}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@-moz-keyframes bounceIn {
|
|
9
|
+
0% {opacity: 0; -moz-transform: scale(.3);}
|
|
10
|
+
50% {opacity: 1; -moz-transform: scale(1.05);}
|
|
11
|
+
70% {-moz-transform: scale(.9);}
|
|
12
|
+
100% {-moz-transform: scale(1);}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@-ms-keyframes bounceIn {
|
|
16
|
+
0% {opacity: 0; -ms-transform: scale(.3);}
|
|
17
|
+
50% {opacity: 1; -ms-transform: scale(1.05);}
|
|
18
|
+
70% {-ms-transform: scale(.9);}
|
|
19
|
+
100% {-ms-transform: scale(1);}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@-o-keyframes bounceIn {
|
|
23
|
+
0% {opacity: 0; -o-transform: scale(.3);}
|
|
24
|
+
50% {opacity: 1; -o-transform: scale(1.05);}
|
|
25
|
+
70% {-o-transform: scale(.9);}
|
|
26
|
+
100% {-o-transform: scale(1);}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes bounceIn {
|
|
30
|
+
0% {opacity: 0; transform: scale(.3);}
|
|
31
|
+
50% {opacity: 1; transform: scale(1.05);}
|
|
32
|
+
70% {transform: scale(.9);}
|
|
33
|
+
100% {transform: scale(1);}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin bounceIn($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
37
|
+
@include animation-name(bounceIn);
|
|
38
|
+
@include duration($duration);
|
|
39
|
+
@include delay($delay);
|
|
40
|
+
@include function($function);
|
|
41
|
+
@include fill-mode($fill);
|
|
42
|
+
@include visibility($visibility);
|
|
43
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@-webkit-keyframes bounceInDown {
|
|
2
|
+
0% {opacity: 0; -webkit-transform: translateY(-2000px);}
|
|
3
|
+
60% {opacity: 1; -webkit-transform: translateY(30px);}
|
|
4
|
+
80% {-webkit-transform: translateY(-10px);}
|
|
5
|
+
100% {-webkit-transform: translateY(0);}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@-moz-keyframes bounceInDown {
|
|
9
|
+
0% {opacity: 0; -moz-transform: translateY(-2000px);}
|
|
10
|
+
60% {opacity: 1; -moz-transform: translateY(30px);}
|
|
11
|
+
80% {-moz-transform: translateY(-10px);}
|
|
12
|
+
100% {-moz-transform: translateY(0);}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@-ms-keyframes bounceInDown {
|
|
16
|
+
0% {opacity: 0; -ms-transform: translateY(-2000px);}
|
|
17
|
+
60% {opacity: 1; -ms-transform: translateY(30px);}
|
|
18
|
+
80% {-ms-transform: translateY(-10px);}
|
|
19
|
+
100% {-ms-transform: translateY(0);}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@-o-keyframes bounceInDown {
|
|
23
|
+
0% {opacity: 0; -o-transform: translateY(-2000px);}
|
|
24
|
+
60% {opacity: 1; -o-transform: translateY(30px);}
|
|
25
|
+
80% {-o-transform: translateY(-10px);}
|
|
26
|
+
100% {-o-transform: translateY(0);}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes bounceInDown {
|
|
30
|
+
0% {opacity: 0; transform: translateY(-2000px);}
|
|
31
|
+
60% {opacity: 1; transform: translateY(30px);}
|
|
32
|
+
80% {transform: translateY(-10px);}
|
|
33
|
+
100% {transform: translateY(0);}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin bounceInDown($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
37
|
+
@include animation-name(bounceInDown);
|
|
38
|
+
@include duration($duration);
|
|
39
|
+
@include delay($delay);
|
|
40
|
+
@include function($function);
|
|
41
|
+
@include fill-mode($fill);
|
|
42
|
+
@include visibility($visibility);
|
|
43
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@-webkit-keyframes bounceInLeft {
|
|
2
|
+
0% {opacity: 0; -webkit-transform: translateX(-2000px);}
|
|
3
|
+
60% {opacity: 1; -webkit-transform: translateX(30px);}
|
|
4
|
+
80% {-webkit-transform: translateX(-10px);}
|
|
5
|
+
100% {-webkit-transform: translateX(0);}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@-moz-keyframes bounceInLeft {
|
|
9
|
+
0% {opacity: 0; -moz-transform: translateX(-2000px);}
|
|
10
|
+
60% {opacity: 1; -moz-transform: translateX(30px);}
|
|
11
|
+
80% {-moz-transform: translateX(-10px);}
|
|
12
|
+
100% {-moz-transform: translateX(0);}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@-ms-keyframes bounceInLeft {
|
|
16
|
+
0% {opacity: 0; -ms-transform: translateX(-2000px);}
|
|
17
|
+
60% {opacity: 1; -ms-transform: translateX(30px);}
|
|
18
|
+
80% {-ms-transform: translateX(-10px);}
|
|
19
|
+
100% {-ms-transform: translateX(0);}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@-o-keyframes bounceInLeft {
|
|
23
|
+
0% {opacity: 0; -o-transform: translateX(-2000px);}
|
|
24
|
+
60% {opacity: 1; -o-transform: translateX(30px);}
|
|
25
|
+
80% {-o-transform: translateX(-10px);}
|
|
26
|
+
100% {-o-transform: translateX(0);}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes bounceInLeft {
|
|
30
|
+
0% {opacity: 0; transform: translateX(-2000px);}
|
|
31
|
+
60% {opacity: 1; transform: translateX(30px);}
|
|
32
|
+
80% {transform: translateX(-10px);}
|
|
33
|
+
100% {transform: translateX(0);}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin bounceInLeft($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
37
|
+
@include animation-name(bounceInLeft);
|
|
38
|
+
@include duration($duration);
|
|
39
|
+
@include delay($delay);
|
|
40
|
+
@include function($function);
|
|
41
|
+
@include fill-mode($fill);
|
|
42
|
+
@include visibility($visibility);
|
|
43
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@-webkit-keyframes bounceInRight {
|
|
2
|
+
0% {opacity: 0; -webkit-transform: translateX(2000px);}
|
|
3
|
+
60% {opacity: 1; -webkit-transform: translateX(-30px);}
|
|
4
|
+
80% {-webkit-transform: translateX(10px);}
|
|
5
|
+
100% {-webkit-transform: translateX(0);}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@-moz-keyframes bounceInRight {
|
|
9
|
+
0% {opacity: 0; -moz-transform: translateX(2000px);}
|
|
10
|
+
60% {opacity: 1; -moz-transform: translateX(-30px);}
|
|
11
|
+
80% {-moz-transform: translateX(10px);}
|
|
12
|
+
100% {-moz-transform: translateX(0);}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@-ms-keyframes bounceInRight {
|
|
16
|
+
0% {opacity: 0; -ms-transform: translateX(2000px);}
|
|
17
|
+
60% {opacity: 1; -ms-transform: translateX(-30px);}
|
|
18
|
+
80% {-ms-transform: translateX(10px);}
|
|
19
|
+
100% {-ms-transform: translateX(0);}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@-o-keyframes bounceInRight {
|
|
23
|
+
0% {opacity: 0; -o-transform: translateX(2000px);}
|
|
24
|
+
60% {opacity: 1; -o-transform: translateX(-30px);}
|
|
25
|
+
80% {-o-transform: translateX(10px);}
|
|
26
|
+
100% {-o-transform: translateX(0);}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes bounceInRight {
|
|
30
|
+
0% {opacity: 0; transform: translateX(2000px);}
|
|
31
|
+
60% {opacity: 1; transform: translateX(-30px);}
|
|
32
|
+
80% {transform: translateX(10px);}
|
|
33
|
+
100% {transform: translateX(0);}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin bounceInRight($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
37
|
+
@include animation-name(bounceInRight);
|
|
38
|
+
@include duration($duration);
|
|
39
|
+
@include delay($delay);
|
|
40
|
+
@include function($function);
|
|
41
|
+
@include fill-mode($fill);
|
|
42
|
+
@include visibility($visibility);
|
|
43
|
+
}
|