compass-animate 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|