├── .babelrc
├── .codeclimate.yml
├── .eslintrc
├── .gitignore
├── .jscsrc
├── .travis.yml
├── LICENSE
├── README.md
├── dist
└── .keep
├── example
├── .keep
├── animate.css
├── assets
│ └── title.png
├── dist
│ └── .keep
├── index.html
└── src
│ ├── example.js
│ └── index.js
├── karma.conf.js
├── lib
└── .keep
├── package.json
├── screenshot.gif
├── src
└── index.js
└── test
└── index.spec.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react", "es2015", "stage-0"],
3 | "plugins": [
4 | "add-module-exports",
5 | "transform-object-assign"
6 | ]
7 | }
--------------------------------------------------------------------------------
/.codeclimate.yml:
--------------------------------------------------------------------------------
1 | languages:
2 | Ruby: true
3 | JavaScript: true
4 | PHP: true
5 | Python: true
6 | exclude_paths:
7 | - example/*
8 | - example/**/*
9 | - karma.conf.js
10 | - test/*
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "parser": "babel-eslint"
4 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | lib/
3 | npm-debug.log
4 | example/dist/
--------------------------------------------------------------------------------
/.jscsrc:
--------------------------------------------------------------------------------
1 | {
2 | "preset": "airbnb",
3 | "esnext": true
4 | }
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 |
3 | node_js:
4 | - '4.3.0'
5 |
6 | install:
7 | - npm i
8 |
9 | script:
10 | - 'npm run lint'
11 | - 'npm test'
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Bokuweb
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-balloon
2 |
3 | react balloon conponent.
4 |
5 | [](https://codeclimate.com/github/bokuweb/react-balloon)
6 |
7 | ## screenshot
8 |
9 | 
10 |
11 | ## DEMO
12 |
13 | http://bokuweb.github.io/react-balloon/
14 |
15 | ## Installation
16 |
17 | ```sh
18 | npm i react-balloon
19 | ```
20 |
21 | ## Overview
22 |
23 | ``` javascript
24 |
30 | Hello, World!!
31 |
32 | ```
33 |
34 | ## Properties
35 |
36 | #### box: {x: number, y:number, width:number, height:number}
37 |
38 | Specifies the `x` ,`y`, `width` and `height` that the component should start at.
39 |
40 | #### pointer: {x: number, y:number}}
41 |
42 | `pointer` sepecifies balloon poinetr position.
43 |
44 | #### minWidth {number}
45 |
46 | Specifies the minimum width of the Box.
47 | This is generally not necessary to use.
48 |
49 | #### minHeight {number}
50 |
51 | Specifies the minimum height of the Box.
52 | This is generally not necessary to use.
53 |
54 | #### maxWidth {number}
55 |
56 | Specifies the maximum width of the Box.
57 | This is generally not necessary to use.
58 |
59 | #### maxHeight {number}
60 |
61 | Specifies the maximum height of the component.
62 | This is generally not necessary to use.
63 |
64 | #### customClass {string}
65 |
66 | The css class set on the component.
67 | This is generally not necessary to use.
68 |
69 | #### style {object}
70 |
71 | The css style set on the component.
72 | This is generally not necessary to use.
73 |
74 | #### onBoxResizeStart {func}
75 |
76 | Callback called on resize start.
77 |
78 | #### onBoxResize {func}
79 |
80 | Callback called on resizing.
81 | Receives the box size `{width: number, height: number}` as argument.
82 |
83 | #### onBoxResizeStop {func}
84 |
85 | Callback called on resize stop.
86 | Receives the box size `{width: number, height: number}` as argument.
87 |
88 | #### onBoxDrageStart {func}
89 |
90 | Callback called on box dragging start.
91 |
92 | #### onBoxDrag {func}
93 |
94 | Callback called on box resizing.
95 | `onBoxDrag` called with the following parameters:
96 |
97 | ``` javascript
98 | { left: number, top: number }
99 | ```
100 |
101 | #### onBoxDragStop {func}
102 |
103 | Callback called on box dragging stop.
104 | `onBoxDragStop` called with the following parameters:
105 |
106 | ``` javascript
107 | { left: number, top: number }
108 | ```
109 |
110 | #### onPointerDrageStart {func}
111 |
112 | Callback called on pointer dragging start.
113 |
114 | #### onPointerDrag {func}
115 |
116 | Callback called on pointer resizing.
117 | `onPointerDrag` called with the following parameters:
118 |
119 | ``` javascript
120 | { left: number, top: number }
121 | ```
122 |
123 | #### onPointerDragStop {func}
124 |
125 | Callback called on pointer dragging stop.
126 | `onPointerDragStop` called with the following parameters:
127 |
128 | ``` javascript
129 | { left: number, top: number }
130 | ```
131 |
132 |
133 | ## Test
134 |
135 | ``` sh
136 | npm t
137 | ```
138 |
139 | ## License
140 |
141 | The MIT License (MIT)
142 |
143 | Copyright (c) 2016 Bokuweb
144 |
145 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
146 |
147 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
148 |
149 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
150 |
--------------------------------------------------------------------------------
/dist/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bokuweb-sandbox/react-balloon/17bd7e7b12af6d281110f8be47815abd9d243f98/dist/.keep
--------------------------------------------------------------------------------
/example/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bokuweb-sandbox/react-balloon/17bd7e7b12af6d281110f8be47815abd9d243f98/example/.keep
--------------------------------------------------------------------------------
/example/animate.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | /*!
4 | * animate.css -http://daneden.me/animate
5 | * Version - 3.5.1
6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT
7 | *
8 | * Copyright (c) 2016 Daniel Eden
9 | */
10 |
11 | .animated {
12 | -webkit-animation-duration: 1s;
13 | animation-duration: 1s;
14 | -webkit-animation-fill-mode: both;
15 | animation-fill-mode: both;
16 | }
17 |
18 | .animated.infinite {
19 | -webkit-animation-iteration-count: infinite;
20 | animation-iteration-count: infinite;
21 | }
22 |
23 | .animated.hinge {
24 | -webkit-animation-duration: 2s;
25 | animation-duration: 2s;
26 | }
27 |
28 | .animated.flipOutX,
29 | .animated.flipOutY,
30 | .animated.bounceIn,
31 | .animated.bounceOut {
32 | -webkit-animation-duration: .75s;
33 | animation-duration: .75s;
34 | }
35 |
36 | @-webkit-keyframes bounce {
37 | from, 20%, 53%, 80%, to {
38 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
39 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
40 | -webkit-transform: translate3d(0,0,0);
41 | transform: translate3d(0,0,0);
42 | }
43 |
44 | 40%, 43% {
45 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
46 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
47 | -webkit-transform: translate3d(0, -30px, 0);
48 | transform: translate3d(0, -30px, 0);
49 | }
50 |
51 | 70% {
52 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
53 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
54 | -webkit-transform: translate3d(0, -15px, 0);
55 | transform: translate3d(0, -15px, 0);
56 | }
57 |
58 | 90% {
59 | -webkit-transform: translate3d(0,-4px,0);
60 | transform: translate3d(0,-4px,0);
61 | }
62 | }
63 |
64 | @keyframes bounce {
65 | from, 20%, 53%, 80%, to {
66 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
67 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
68 | -webkit-transform: translate3d(0,0,0);
69 | transform: translate3d(0,0,0);
70 | }
71 |
72 | 40%, 43% {
73 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
74 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
75 | -webkit-transform: translate3d(0, -30px, 0);
76 | transform: translate3d(0, -30px, 0);
77 | }
78 |
79 | 70% {
80 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
81 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
82 | -webkit-transform: translate3d(0, -15px, 0);
83 | transform: translate3d(0, -15px, 0);
84 | }
85 |
86 | 90% {
87 | -webkit-transform: translate3d(0,-4px,0);
88 | transform: translate3d(0,-4px,0);
89 | }
90 | }
91 |
92 | .bounce {
93 | -webkit-animation-name: bounce;
94 | animation-name: bounce;
95 | -webkit-transform-origin: center bottom;
96 | transform-origin: center bottom;
97 | }
98 |
99 | @-webkit-keyframes flash {
100 | from, 50%, to {
101 | opacity: 1;
102 | }
103 |
104 | 25%, 75% {
105 | opacity: 0;
106 | }
107 | }
108 |
109 | @keyframes flash {
110 | from, 50%, to {
111 | opacity: 1;
112 | }
113 |
114 | 25%, 75% {
115 | opacity: 0;
116 | }
117 | }
118 |
119 | .flash {
120 | -webkit-animation-name: flash;
121 | animation-name: flash;
122 | }
123 |
124 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
125 |
126 | @-webkit-keyframes pulse {
127 | from {
128 | -webkit-transform: scale3d(1, 1, 1);
129 | transform: scale3d(1, 1, 1);
130 | }
131 |
132 | 50% {
133 | -webkit-transform: scale3d(1.05, 1.05, 1.05);
134 | transform: scale3d(1.05, 1.05, 1.05);
135 | }
136 |
137 | to {
138 | -webkit-transform: scale3d(1, 1, 1);
139 | transform: scale3d(1, 1, 1);
140 | }
141 | }
142 |
143 | @keyframes pulse {
144 | from {
145 | -webkit-transform: scale3d(1, 1, 1);
146 | transform: scale3d(1, 1, 1);
147 | }
148 |
149 | 50% {
150 | -webkit-transform: scale3d(1.05, 1.05, 1.05);
151 | transform: scale3d(1.05, 1.05, 1.05);
152 | }
153 |
154 | to {
155 | -webkit-transform: scale3d(1, 1, 1);
156 | transform: scale3d(1, 1, 1);
157 | }
158 | }
159 |
160 | .pulse {
161 | -webkit-animation-name: pulse;
162 | animation-name: pulse;
163 | }
164 |
165 | @-webkit-keyframes rubberBand {
166 | from {
167 | -webkit-transform: scale3d(1, 1, 1);
168 | transform: scale3d(1, 1, 1);
169 | }
170 |
171 | 30% {
172 | -webkit-transform: scale3d(1.25, 0.75, 1);
173 | transform: scale3d(1.25, 0.75, 1);
174 | }
175 |
176 | 40% {
177 | -webkit-transform: scale3d(0.75, 1.25, 1);
178 | transform: scale3d(0.75, 1.25, 1);
179 | }
180 |
181 | 50% {
182 | -webkit-transform: scale3d(1.15, 0.85, 1);
183 | transform: scale3d(1.15, 0.85, 1);
184 | }
185 |
186 | 65% {
187 | -webkit-transform: scale3d(.95, 1.05, 1);
188 | transform: scale3d(.95, 1.05, 1);
189 | }
190 |
191 | 75% {
192 | -webkit-transform: scale3d(1.05, .95, 1);
193 | transform: scale3d(1.05, .95, 1);
194 | }
195 |
196 | to {
197 | -webkit-transform: scale3d(1, 1, 1);
198 | transform: scale3d(1, 1, 1);
199 | }
200 | }
201 |
202 | @keyframes rubberBand {
203 | from {
204 | -webkit-transform: scale3d(1, 1, 1);
205 | transform: scale3d(1, 1, 1);
206 | }
207 |
208 | 30% {
209 | -webkit-transform: scale3d(1.25, 0.75, 1);
210 | transform: scale3d(1.25, 0.75, 1);
211 | }
212 |
213 | 40% {
214 | -webkit-transform: scale3d(0.75, 1.25, 1);
215 | transform: scale3d(0.75, 1.25, 1);
216 | }
217 |
218 | 50% {
219 | -webkit-transform: scale3d(1.15, 0.85, 1);
220 | transform: scale3d(1.15, 0.85, 1);
221 | }
222 |
223 | 65% {
224 | -webkit-transform: scale3d(.95, 1.05, 1);
225 | transform: scale3d(.95, 1.05, 1);
226 | }
227 |
228 | 75% {
229 | -webkit-transform: scale3d(1.05, .95, 1);
230 | transform: scale3d(1.05, .95, 1);
231 | }
232 |
233 | to {
234 | -webkit-transform: scale3d(1, 1, 1);
235 | transform: scale3d(1, 1, 1);
236 | }
237 | }
238 |
239 | .rubberBand {
240 | -webkit-animation-name: rubberBand;
241 | animation-name: rubberBand;
242 | }
243 |
244 | @-webkit-keyframes shake {
245 | from, to {
246 | -webkit-transform: translate3d(0, 0, 0);
247 | transform: translate3d(0, 0, 0);
248 | }
249 |
250 | 10%, 30%, 50%, 70%, 90% {
251 | -webkit-transform: translate3d(-10px, 0, 0);
252 | transform: translate3d(-10px, 0, 0);
253 | }
254 |
255 | 20%, 40%, 60%, 80% {
256 | -webkit-transform: translate3d(10px, 0, 0);
257 | transform: translate3d(10px, 0, 0);
258 | }
259 | }
260 |
261 | @keyframes shake {
262 | from, to {
263 | -webkit-transform: translate3d(0, 0, 0);
264 | transform: translate3d(0, 0, 0);
265 | }
266 |
267 | 10%, 30%, 50%, 70%, 90% {
268 | -webkit-transform: translate3d(-10px, 0, 0);
269 | transform: translate3d(-10px, 0, 0);
270 | }
271 |
272 | 20%, 40%, 60%, 80% {
273 | -webkit-transform: translate3d(10px, 0, 0);
274 | transform: translate3d(10px, 0, 0);
275 | }
276 | }
277 |
278 | .shake {
279 | -webkit-animation-name: shake;
280 | animation-name: shake;
281 | }
282 |
283 | @-webkit-keyframes headShake {
284 | 0% {
285 | -webkit-transform: translateX(0);
286 | transform: translateX(0);
287 | }
288 |
289 | 6.5% {
290 | -webkit-transform: translateX(-6px) rotateY(-9deg);
291 | transform: translateX(-6px) rotateY(-9deg);
292 | }
293 |
294 | 18.5% {
295 | -webkit-transform: translateX(5px) rotateY(7deg);
296 | transform: translateX(5px) rotateY(7deg);
297 | }
298 |
299 | 31.5% {
300 | -webkit-transform: translateX(-3px) rotateY(-5deg);
301 | transform: translateX(-3px) rotateY(-5deg);
302 | }
303 |
304 | 43.5% {
305 | -webkit-transform: translateX(2px) rotateY(3deg);
306 | transform: translateX(2px) rotateY(3deg);
307 | }
308 |
309 | 50% {
310 | -webkit-transform: translateX(0);
311 | transform: translateX(0);
312 | }
313 | }
314 |
315 | @keyframes headShake {
316 | 0% {
317 | -webkit-transform: translateX(0);
318 | transform: translateX(0);
319 | }
320 |
321 | 6.5% {
322 | -webkit-transform: translateX(-6px) rotateY(-9deg);
323 | transform: translateX(-6px) rotateY(-9deg);
324 | }
325 |
326 | 18.5% {
327 | -webkit-transform: translateX(5px) rotateY(7deg);
328 | transform: translateX(5px) rotateY(7deg);
329 | }
330 |
331 | 31.5% {
332 | -webkit-transform: translateX(-3px) rotateY(-5deg);
333 | transform: translateX(-3px) rotateY(-5deg);
334 | }
335 |
336 | 43.5% {
337 | -webkit-transform: translateX(2px) rotateY(3deg);
338 | transform: translateX(2px) rotateY(3deg);
339 | }
340 |
341 | 50% {
342 | -webkit-transform: translateX(0);
343 | transform: translateX(0);
344 | }
345 | }
346 |
347 | .headShake {
348 | -webkit-animation-timing-function: ease-in-out;
349 | animation-timing-function: ease-in-out;
350 | -webkit-animation-name: headShake;
351 | animation-name: headShake;
352 | }
353 |
354 | @-webkit-keyframes swing {
355 | 20% {
356 | -webkit-transform: rotate3d(0, 0, 1, 15deg);
357 | transform: rotate3d(0, 0, 1, 15deg);
358 | }
359 |
360 | 40% {
361 | -webkit-transform: rotate3d(0, 0, 1, -10deg);
362 | transform: rotate3d(0, 0, 1, -10deg);
363 | }
364 |
365 | 60% {
366 | -webkit-transform: rotate3d(0, 0, 1, 5deg);
367 | transform: rotate3d(0, 0, 1, 5deg);
368 | }
369 |
370 | 80% {
371 | -webkit-transform: rotate3d(0, 0, 1, -5deg);
372 | transform: rotate3d(0, 0, 1, -5deg);
373 | }
374 |
375 | to {
376 | -webkit-transform: rotate3d(0, 0, 1, 0deg);
377 | transform: rotate3d(0, 0, 1, 0deg);
378 | }
379 | }
380 |
381 | @keyframes swing {
382 | 20% {
383 | -webkit-transform: rotate3d(0, 0, 1, 15deg);
384 | transform: rotate3d(0, 0, 1, 15deg);
385 | }
386 |
387 | 40% {
388 | -webkit-transform: rotate3d(0, 0, 1, -10deg);
389 | transform: rotate3d(0, 0, 1, -10deg);
390 | }
391 |
392 | 60% {
393 | -webkit-transform: rotate3d(0, 0, 1, 5deg);
394 | transform: rotate3d(0, 0, 1, 5deg);
395 | }
396 |
397 | 80% {
398 | -webkit-transform: rotate3d(0, 0, 1, -5deg);
399 | transform: rotate3d(0, 0, 1, -5deg);
400 | }
401 |
402 | to {
403 | -webkit-transform: rotate3d(0, 0, 1, 0deg);
404 | transform: rotate3d(0, 0, 1, 0deg);
405 | }
406 | }
407 |
408 | .swing {
409 | -webkit-transform-origin: top center;
410 | transform-origin: top center;
411 | -webkit-animation-name: swing;
412 | animation-name: swing;
413 | }
414 |
415 | @-webkit-keyframes tada {
416 | from {
417 | -webkit-transform: scale3d(1, 1, 1);
418 | transform: scale3d(1, 1, 1);
419 | }
420 |
421 | 10%, 20% {
422 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
423 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
424 | }
425 |
426 | 30%, 50%, 70%, 90% {
427 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
428 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
429 | }
430 |
431 | 40%, 60%, 80% {
432 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
433 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
434 | }
435 |
436 | to {
437 | -webkit-transform: scale3d(1, 1, 1);
438 | transform: scale3d(1, 1, 1);
439 | }
440 | }
441 |
442 | @keyframes tada {
443 | from {
444 | -webkit-transform: scale3d(1, 1, 1);
445 | transform: scale3d(1, 1, 1);
446 | }
447 |
448 | 10%, 20% {
449 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
450 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
451 | }
452 |
453 | 30%, 50%, 70%, 90% {
454 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
455 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
456 | }
457 |
458 | 40%, 60%, 80% {
459 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
460 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
461 | }
462 |
463 | to {
464 | -webkit-transform: scale3d(1, 1, 1);
465 | transform: scale3d(1, 1, 1);
466 | }
467 | }
468 |
469 | .tada {
470 | -webkit-animation-name: tada;
471 | animation-name: tada;
472 | }
473 |
474 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
475 |
476 | @-webkit-keyframes wobble {
477 | from {
478 | -webkit-transform: none;
479 | transform: none;
480 | }
481 |
482 | 15% {
483 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
484 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
485 | }
486 |
487 | 30% {
488 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
489 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
490 | }
491 |
492 | 45% {
493 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
494 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
495 | }
496 |
497 | 60% {
498 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
499 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
500 | }
501 |
502 | 75% {
503 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
504 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
505 | }
506 |
507 | to {
508 | -webkit-transform: none;
509 | transform: none;
510 | }
511 | }
512 |
513 | @keyframes wobble {
514 | from {
515 | -webkit-transform: none;
516 | transform: none;
517 | }
518 |
519 | 15% {
520 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
521 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
522 | }
523 |
524 | 30% {
525 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
526 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
527 | }
528 |
529 | 45% {
530 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
531 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
532 | }
533 |
534 | 60% {
535 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
536 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
537 | }
538 |
539 | 75% {
540 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
541 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
542 | }
543 |
544 | to {
545 | -webkit-transform: none;
546 | transform: none;
547 | }
548 | }
549 |
550 | .wobble {
551 | -webkit-animation-name: wobble;
552 | animation-name: wobble;
553 | }
554 |
555 | @-webkit-keyframes jello {
556 | from, 11.1%, to {
557 | -webkit-transform: none;
558 | transform: none;
559 | }
560 |
561 | 22.2% {
562 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
563 | transform: skewX(-12.5deg) skewY(-12.5deg);
564 | }
565 |
566 | 33.3% {
567 | -webkit-transform: skewX(6.25deg) skewY(6.25deg);
568 | transform: skewX(6.25deg) skewY(6.25deg);
569 | }
570 |
571 | 44.4% {
572 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
573 | transform: skewX(-3.125deg) skewY(-3.125deg);
574 | }
575 |
576 | 55.5% {
577 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
578 | transform: skewX(1.5625deg) skewY(1.5625deg);
579 | }
580 |
581 | 66.6% {
582 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
583 | transform: skewX(-0.78125deg) skewY(-0.78125deg);
584 | }
585 |
586 | 77.7% {
587 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
588 | transform: skewX(0.390625deg) skewY(0.390625deg);
589 | }
590 |
591 | 88.8% {
592 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
593 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
594 | }
595 | }
596 |
597 | @keyframes jello {
598 | from, 11.1%, to {
599 | -webkit-transform: none;
600 | transform: none;
601 | }
602 |
603 | 22.2% {
604 | -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
605 | transform: skewX(-12.5deg) skewY(-12.5deg);
606 | }
607 |
608 | 33.3% {
609 | -webkit-transform: skewX(6.25deg) skewY(6.25deg);
610 | transform: skewX(6.25deg) skewY(6.25deg);
611 | }
612 |
613 | 44.4% {
614 | -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
615 | transform: skewX(-3.125deg) skewY(-3.125deg);
616 | }
617 |
618 | 55.5% {
619 | -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
620 | transform: skewX(1.5625deg) skewY(1.5625deg);
621 | }
622 |
623 | 66.6% {
624 | -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
625 | transform: skewX(-0.78125deg) skewY(-0.78125deg);
626 | }
627 |
628 | 77.7% {
629 | -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
630 | transform: skewX(0.390625deg) skewY(0.390625deg);
631 | }
632 |
633 | 88.8% {
634 | -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
635 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
636 | }
637 | }
638 |
639 | .jello {
640 | -webkit-animation-name: jello;
641 | animation-name: jello;
642 | -webkit-transform-origin: center;
643 | transform-origin: center;
644 | }
645 |
646 | @-webkit-keyframes bounceIn {
647 | from, 20%, 40%, 60%, 80%, to {
648 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
649 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
650 | }
651 |
652 | 0% {
653 | opacity: 0;
654 | -webkit-transform: scale3d(.3, .3, .3);
655 | transform: scale3d(.3, .3, .3);
656 | }
657 |
658 | 20% {
659 | -webkit-transform: scale3d(1.1, 1.1, 1.1);
660 | transform: scale3d(1.1, 1.1, 1.1);
661 | }
662 |
663 | 40% {
664 | -webkit-transform: scale3d(.9, .9, .9);
665 | transform: scale3d(.9, .9, .9);
666 | }
667 |
668 | 60% {
669 | opacity: 1;
670 | -webkit-transform: scale3d(1.03, 1.03, 1.03);
671 | transform: scale3d(1.03, 1.03, 1.03);
672 | }
673 |
674 | 80% {
675 | -webkit-transform: scale3d(.97, .97, .97);
676 | transform: scale3d(.97, .97, .97);
677 | }
678 |
679 | to {
680 | opacity: 1;
681 | -webkit-transform: scale3d(1, 1, 1);
682 | transform: scale3d(1, 1, 1);
683 | }
684 | }
685 |
686 | @keyframes bounceIn {
687 | from, 20%, 40%, 60%, 80%, to {
688 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
689 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
690 | }
691 |
692 | 0% {
693 | opacity: 0;
694 | -webkit-transform: scale3d(.3, .3, .3);
695 | transform: scale3d(.3, .3, .3);
696 | }
697 |
698 | 20% {
699 | -webkit-transform: scale3d(1.1, 1.1, 1.1);
700 | transform: scale3d(1.1, 1.1, 1.1);
701 | }
702 |
703 | 40% {
704 | -webkit-transform: scale3d(.9, .9, .9);
705 | transform: scale3d(.9, .9, .9);
706 | }
707 |
708 | 60% {
709 | opacity: 1;
710 | -webkit-transform: scale3d(1.03, 1.03, 1.03);
711 | transform: scale3d(1.03, 1.03, 1.03);
712 | }
713 |
714 | 80% {
715 | -webkit-transform: scale3d(.97, .97, .97);
716 | transform: scale3d(.97, .97, .97);
717 | }
718 |
719 | to {
720 | opacity: 1;
721 | -webkit-transform: scale3d(1, 1, 1);
722 | transform: scale3d(1, 1, 1);
723 | }
724 | }
725 |
726 | .bounceIn {
727 | -webkit-animation-name: bounceIn;
728 | animation-name: bounceIn;
729 | }
730 |
731 | @-webkit-keyframes bounceInDown {
732 | from, 60%, 75%, 90%, to {
733 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
734 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
735 | }
736 |
737 | 0% {
738 | opacity: 0;
739 | -webkit-transform: translate3d(0, -3000px, 0);
740 | transform: translate3d(0, -3000px, 0);
741 | }
742 |
743 | 60% {
744 | opacity: 1;
745 | -webkit-transform: translate3d(0, 25px, 0);
746 | transform: translate3d(0, 25px, 0);
747 | }
748 |
749 | 75% {
750 | -webkit-transform: translate3d(0, -10px, 0);
751 | transform: translate3d(0, -10px, 0);
752 | }
753 |
754 | 90% {
755 | -webkit-transform: translate3d(0, 5px, 0);
756 | transform: translate3d(0, 5px, 0);
757 | }
758 |
759 | to {
760 | -webkit-transform: none;
761 | transform: none;
762 | }
763 | }
764 |
765 | @keyframes bounceInDown {
766 | from, 60%, 75%, 90%, to {
767 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
768 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
769 | }
770 |
771 | 0% {
772 | opacity: 0;
773 | -webkit-transform: translate3d(0, -3000px, 0);
774 | transform: translate3d(0, -3000px, 0);
775 | }
776 |
777 | 60% {
778 | opacity: 1;
779 | -webkit-transform: translate3d(0, 25px, 0);
780 | transform: translate3d(0, 25px, 0);
781 | }
782 |
783 | 75% {
784 | -webkit-transform: translate3d(0, -10px, 0);
785 | transform: translate3d(0, -10px, 0);
786 | }
787 |
788 | 90% {
789 | -webkit-transform: translate3d(0, 5px, 0);
790 | transform: translate3d(0, 5px, 0);
791 | }
792 |
793 | to {
794 | -webkit-transform: none;
795 | transform: none;
796 | }
797 | }
798 |
799 | .bounceInDown {
800 | -webkit-animation-name: bounceInDown;
801 | animation-name: bounceInDown;
802 | }
803 |
804 | @-webkit-keyframes bounceInLeft {
805 | from, 60%, 75%, 90%, to {
806 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
807 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
808 | }
809 |
810 | 0% {
811 | opacity: 0;
812 | -webkit-transform: translate3d(-3000px, 0, 0);
813 | transform: translate3d(-3000px, 0, 0);
814 | }
815 |
816 | 60% {
817 | opacity: 1;
818 | -webkit-transform: translate3d(25px, 0, 0);
819 | transform: translate3d(25px, 0, 0);
820 | }
821 |
822 | 75% {
823 | -webkit-transform: translate3d(-10px, 0, 0);
824 | transform: translate3d(-10px, 0, 0);
825 | }
826 |
827 | 90% {
828 | -webkit-transform: translate3d(5px, 0, 0);
829 | transform: translate3d(5px, 0, 0);
830 | }
831 |
832 | to {
833 | -webkit-transform: none;
834 | transform: none;
835 | }
836 | }
837 |
838 | @keyframes bounceInLeft {
839 | from, 60%, 75%, 90%, to {
840 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
841 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
842 | }
843 |
844 | 0% {
845 | opacity: 0;
846 | -webkit-transform: translate3d(-3000px, 0, 0);
847 | transform: translate3d(-3000px, 0, 0);
848 | }
849 |
850 | 60% {
851 | opacity: 1;
852 | -webkit-transform: translate3d(25px, 0, 0);
853 | transform: translate3d(25px, 0, 0);
854 | }
855 |
856 | 75% {
857 | -webkit-transform: translate3d(-10px, 0, 0);
858 | transform: translate3d(-10px, 0, 0);
859 | }
860 |
861 | 90% {
862 | -webkit-transform: translate3d(5px, 0, 0);
863 | transform: translate3d(5px, 0, 0);
864 | }
865 |
866 | to {
867 | -webkit-transform: none;
868 | transform: none;
869 | }
870 | }
871 |
872 | .bounceInLeft {
873 | -webkit-animation-name: bounceInLeft;
874 | animation-name: bounceInLeft;
875 | }
876 |
877 | @-webkit-keyframes bounceInRight {
878 | from, 60%, 75%, 90%, to {
879 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
880 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
881 | }
882 |
883 | from {
884 | opacity: 0;
885 | -webkit-transform: translate3d(3000px, 0, 0);
886 | transform: translate3d(3000px, 0, 0);
887 | }
888 |
889 | 60% {
890 | opacity: 1;
891 | -webkit-transform: translate3d(-25px, 0, 0);
892 | transform: translate3d(-25px, 0, 0);
893 | }
894 |
895 | 75% {
896 | -webkit-transform: translate3d(10px, 0, 0);
897 | transform: translate3d(10px, 0, 0);
898 | }
899 |
900 | 90% {
901 | -webkit-transform: translate3d(-5px, 0, 0);
902 | transform: translate3d(-5px, 0, 0);
903 | }
904 |
905 | to {
906 | -webkit-transform: none;
907 | transform: none;
908 | }
909 | }
910 |
911 | @keyframes bounceInRight {
912 | from, 60%, 75%, 90%, to {
913 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
914 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
915 | }
916 |
917 | from {
918 | opacity: 0;
919 | -webkit-transform: translate3d(3000px, 0, 0);
920 | transform: translate3d(3000px, 0, 0);
921 | }
922 |
923 | 60% {
924 | opacity: 1;
925 | -webkit-transform: translate3d(-25px, 0, 0);
926 | transform: translate3d(-25px, 0, 0);
927 | }
928 |
929 | 75% {
930 | -webkit-transform: translate3d(10px, 0, 0);
931 | transform: translate3d(10px, 0, 0);
932 | }
933 |
934 | 90% {
935 | -webkit-transform: translate3d(-5px, 0, 0);
936 | transform: translate3d(-5px, 0, 0);
937 | }
938 |
939 | to {
940 | -webkit-transform: none;
941 | transform: none;
942 | }
943 | }
944 |
945 | .bounceInRight {
946 | -webkit-animation-name: bounceInRight;
947 | animation-name: bounceInRight;
948 | }
949 |
950 | @-webkit-keyframes bounceInUp {
951 | from, 60%, 75%, 90%, to {
952 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
953 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
954 | }
955 |
956 | from {
957 | opacity: 0;
958 | -webkit-transform: translate3d(0, 3000px, 0);
959 | transform: translate3d(0, 3000px, 0);
960 | }
961 |
962 | 60% {
963 | opacity: 1;
964 | -webkit-transform: translate3d(0, -20px, 0);
965 | transform: translate3d(0, -20px, 0);
966 | }
967 |
968 | 75% {
969 | -webkit-transform: translate3d(0, 10px, 0);
970 | transform: translate3d(0, 10px, 0);
971 | }
972 |
973 | 90% {
974 | -webkit-transform: translate3d(0, -5px, 0);
975 | transform: translate3d(0, -5px, 0);
976 | }
977 |
978 | to {
979 | -webkit-transform: translate3d(0, 0, 0);
980 | transform: translate3d(0, 0, 0);
981 | }
982 | }
983 |
984 | @keyframes bounceInUp {
985 | from, 60%, 75%, 90%, to {
986 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
987 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
988 | }
989 |
990 | from {
991 | opacity: 0;
992 | -webkit-transform: translate3d(0, 3000px, 0);
993 | transform: translate3d(0, 3000px, 0);
994 | }
995 |
996 | 60% {
997 | opacity: 1;
998 | -webkit-transform: translate3d(0, -20px, 0);
999 | transform: translate3d(0, -20px, 0);
1000 | }
1001 |
1002 | 75% {
1003 | -webkit-transform: translate3d(0, 10px, 0);
1004 | transform: translate3d(0, 10px, 0);
1005 | }
1006 |
1007 | 90% {
1008 | -webkit-transform: translate3d(0, -5px, 0);
1009 | transform: translate3d(0, -5px, 0);
1010 | }
1011 |
1012 | to {
1013 | -webkit-transform: translate3d(0, 0, 0);
1014 | transform: translate3d(0, 0, 0);
1015 | }
1016 | }
1017 |
1018 | .bounceInUp {
1019 | -webkit-animation-name: bounceInUp;
1020 | animation-name: bounceInUp;
1021 | }
1022 |
1023 | @-webkit-keyframes bounceOut {
1024 | 20% {
1025 | -webkit-transform: scale3d(.9, .9, .9);
1026 | transform: scale3d(.9, .9, .9);
1027 | }
1028 |
1029 | 50%, 55% {
1030 | opacity: 1;
1031 | -webkit-transform: scale3d(1.1, 1.1, 1.1);
1032 | transform: scale3d(1.1, 1.1, 1.1);
1033 | }
1034 |
1035 | to {
1036 | opacity: 0;
1037 | -webkit-transform: scale3d(.3, .3, .3);
1038 | transform: scale3d(.3, .3, .3);
1039 | }
1040 | }
1041 |
1042 | @keyframes bounceOut {
1043 | 20% {
1044 | -webkit-transform: scale3d(.9, .9, .9);
1045 | transform: scale3d(.9, .9, .9);
1046 | }
1047 |
1048 | 50%, 55% {
1049 | opacity: 1;
1050 | -webkit-transform: scale3d(1.1, 1.1, 1.1);
1051 | transform: scale3d(1.1, 1.1, 1.1);
1052 | }
1053 |
1054 | to {
1055 | opacity: 0;
1056 | -webkit-transform: scale3d(.3, .3, .3);
1057 | transform: scale3d(.3, .3, .3);
1058 | }
1059 | }
1060 |
1061 | .bounceOut {
1062 | -webkit-animation-name: bounceOut;
1063 | animation-name: bounceOut;
1064 | }
1065 |
1066 | @-webkit-keyframes bounceOutDown {
1067 | 20% {
1068 | -webkit-transform: translate3d(0, 10px, 0);
1069 | transform: translate3d(0, 10px, 0);
1070 | }
1071 |
1072 | 40%, 45% {
1073 | opacity: 1;
1074 | -webkit-transform: translate3d(0, -20px, 0);
1075 | transform: translate3d(0, -20px, 0);
1076 | }
1077 |
1078 | to {
1079 | opacity: 0;
1080 | -webkit-transform: translate3d(0, 2000px, 0);
1081 | transform: translate3d(0, 2000px, 0);
1082 | }
1083 | }
1084 |
1085 | @keyframes bounceOutDown {
1086 | 20% {
1087 | -webkit-transform: translate3d(0, 10px, 0);
1088 | transform: translate3d(0, 10px, 0);
1089 | }
1090 |
1091 | 40%, 45% {
1092 | opacity: 1;
1093 | -webkit-transform: translate3d(0, -20px, 0);
1094 | transform: translate3d(0, -20px, 0);
1095 | }
1096 |
1097 | to {
1098 | opacity: 0;
1099 | -webkit-transform: translate3d(0, 2000px, 0);
1100 | transform: translate3d(0, 2000px, 0);
1101 | }
1102 | }
1103 |
1104 | .bounceOutDown {
1105 | -webkit-animation-name: bounceOutDown;
1106 | animation-name: bounceOutDown;
1107 | }
1108 |
1109 | @-webkit-keyframes bounceOutLeft {
1110 | 20% {
1111 | opacity: 1;
1112 | -webkit-transform: translate3d(20px, 0, 0);
1113 | transform: translate3d(20px, 0, 0);
1114 | }
1115 |
1116 | to {
1117 | opacity: 0;
1118 | -webkit-transform: translate3d(-2000px, 0, 0);
1119 | transform: translate3d(-2000px, 0, 0);
1120 | }
1121 | }
1122 |
1123 | @keyframes bounceOutLeft {
1124 | 20% {
1125 | opacity: 1;
1126 | -webkit-transform: translate3d(20px, 0, 0);
1127 | transform: translate3d(20px, 0, 0);
1128 | }
1129 |
1130 | to {
1131 | opacity: 0;
1132 | -webkit-transform: translate3d(-2000px, 0, 0);
1133 | transform: translate3d(-2000px, 0, 0);
1134 | }
1135 | }
1136 |
1137 | .bounceOutLeft {
1138 | -webkit-animation-name: bounceOutLeft;
1139 | animation-name: bounceOutLeft;
1140 | }
1141 |
1142 | @-webkit-keyframes bounceOutRight {
1143 | 20% {
1144 | opacity: 1;
1145 | -webkit-transform: translate3d(-20px, 0, 0);
1146 | transform: translate3d(-20px, 0, 0);
1147 | }
1148 |
1149 | to {
1150 | opacity: 0;
1151 | -webkit-transform: translate3d(2000px, 0, 0);
1152 | transform: translate3d(2000px, 0, 0);
1153 | }
1154 | }
1155 |
1156 | @keyframes bounceOutRight {
1157 | 20% {
1158 | opacity: 1;
1159 | -webkit-transform: translate3d(-20px, 0, 0);
1160 | transform: translate3d(-20px, 0, 0);
1161 | }
1162 |
1163 | to {
1164 | opacity: 0;
1165 | -webkit-transform: translate3d(2000px, 0, 0);
1166 | transform: translate3d(2000px, 0, 0);
1167 | }
1168 | }
1169 |
1170 | .bounceOutRight {
1171 | -webkit-animation-name: bounceOutRight;
1172 | animation-name: bounceOutRight;
1173 | }
1174 |
1175 | @-webkit-keyframes bounceOutUp {
1176 | 20% {
1177 | -webkit-transform: translate3d(0, -10px, 0);
1178 | transform: translate3d(0, -10px, 0);
1179 | }
1180 |
1181 | 40%, 45% {
1182 | opacity: 1;
1183 | -webkit-transform: translate3d(0, 20px, 0);
1184 | transform: translate3d(0, 20px, 0);
1185 | }
1186 |
1187 | to {
1188 | opacity: 0;
1189 | -webkit-transform: translate3d(0, -2000px, 0);
1190 | transform: translate3d(0, -2000px, 0);
1191 | }
1192 | }
1193 |
1194 | @keyframes bounceOutUp {
1195 | 20% {
1196 | -webkit-transform: translate3d(0, -10px, 0);
1197 | transform: translate3d(0, -10px, 0);
1198 | }
1199 |
1200 | 40%, 45% {
1201 | opacity: 1;
1202 | -webkit-transform: translate3d(0, 20px, 0);
1203 | transform: translate3d(0, 20px, 0);
1204 | }
1205 |
1206 | to {
1207 | opacity: 0;
1208 | -webkit-transform: translate3d(0, -2000px, 0);
1209 | transform: translate3d(0, -2000px, 0);
1210 | }
1211 | }
1212 |
1213 | .bounceOutUp {
1214 | -webkit-animation-name: bounceOutUp;
1215 | animation-name: bounceOutUp;
1216 | }
1217 |
1218 | @-webkit-keyframes fadeIn {
1219 | from {
1220 | opacity: 0;
1221 | }
1222 |
1223 | to {
1224 | opacity: 1;
1225 | }
1226 | }
1227 |
1228 | @keyframes fadeIn {
1229 | from {
1230 | opacity: 0;
1231 | }
1232 |
1233 | to {
1234 | opacity: 1;
1235 | }
1236 | }
1237 |
1238 | .fadeIn {
1239 | -webkit-animation-name: fadeIn;
1240 | animation-name: fadeIn;
1241 | }
1242 |
1243 | @-webkit-keyframes fadeInDown {
1244 | from {
1245 | opacity: 0;
1246 | -webkit-transform: translate3d(0, -100%, 0);
1247 | transform: translate3d(0, -100%, 0);
1248 | }
1249 |
1250 | to {
1251 | opacity: 1;
1252 | -webkit-transform: none;
1253 | transform: none;
1254 | }
1255 | }
1256 |
1257 | @keyframes fadeInDown {
1258 | from {
1259 | opacity: 0;
1260 | -webkit-transform: translate3d(0, -100%, 0);
1261 | transform: translate3d(0, -100%, 0);
1262 | }
1263 |
1264 | to {
1265 | opacity: 1;
1266 | -webkit-transform: none;
1267 | transform: none;
1268 | }
1269 | }
1270 |
1271 | .fadeInDown {
1272 | -webkit-animation-name: fadeInDown;
1273 | animation-name: fadeInDown;
1274 | }
1275 |
1276 | @-webkit-keyframes fadeInDownBig {
1277 | from {
1278 | opacity: 0;
1279 | -webkit-transform: translate3d(0, -2000px, 0);
1280 | transform: translate3d(0, -2000px, 0);
1281 | }
1282 |
1283 | to {
1284 | opacity: 1;
1285 | -webkit-transform: none;
1286 | transform: none;
1287 | }
1288 | }
1289 |
1290 | @keyframes fadeInDownBig {
1291 | from {
1292 | opacity: 0;
1293 | -webkit-transform: translate3d(0, -2000px, 0);
1294 | transform: translate3d(0, -2000px, 0);
1295 | }
1296 |
1297 | to {
1298 | opacity: 1;
1299 | -webkit-transform: none;
1300 | transform: none;
1301 | }
1302 | }
1303 |
1304 | .fadeInDownBig {
1305 | -webkit-animation-name: fadeInDownBig;
1306 | animation-name: fadeInDownBig;
1307 | }
1308 |
1309 | @-webkit-keyframes fadeInLeft {
1310 | from {
1311 | opacity: 0;
1312 | -webkit-transform: translate3d(-100%, 0, 0);
1313 | transform: translate3d(-100%, 0, 0);
1314 | }
1315 |
1316 | to {
1317 | opacity: 1;
1318 | -webkit-transform: none;
1319 | transform: none;
1320 | }
1321 | }
1322 |
1323 | @keyframes fadeInLeft {
1324 | from {
1325 | opacity: 0;
1326 | -webkit-transform: translate3d(-100%, 0, 0);
1327 | transform: translate3d(-100%, 0, 0);
1328 | }
1329 |
1330 | to {
1331 | opacity: 1;
1332 | -webkit-transform: none;
1333 | transform: none;
1334 | }
1335 | }
1336 |
1337 | .fadeInLeft {
1338 | -webkit-animation-name: fadeInLeft;
1339 | animation-name: fadeInLeft;
1340 | }
1341 |
1342 | @-webkit-keyframes fadeInLeftBig {
1343 | from {
1344 | opacity: 0;
1345 | -webkit-transform: translate3d(-2000px, 0, 0);
1346 | transform: translate3d(-2000px, 0, 0);
1347 | }
1348 |
1349 | to {
1350 | opacity: 1;
1351 | -webkit-transform: none;
1352 | transform: none;
1353 | }
1354 | }
1355 |
1356 | @keyframes fadeInLeftBig {
1357 | from {
1358 | opacity: 0;
1359 | -webkit-transform: translate3d(-2000px, 0, 0);
1360 | transform: translate3d(-2000px, 0, 0);
1361 | }
1362 |
1363 | to {
1364 | opacity: 1;
1365 | -webkit-transform: none;
1366 | transform: none;
1367 | }
1368 | }
1369 |
1370 | .fadeInLeftBig {
1371 | -webkit-animation-name: fadeInLeftBig;
1372 | animation-name: fadeInLeftBig;
1373 | }
1374 |
1375 | @-webkit-keyframes fadeInRight {
1376 | from {
1377 | opacity: 0;
1378 | -webkit-transform: translate3d(100%, 0, 0);
1379 | transform: translate3d(100%, 0, 0);
1380 | }
1381 |
1382 | to {
1383 | opacity: 1;
1384 | -webkit-transform: none;
1385 | transform: none;
1386 | }
1387 | }
1388 |
1389 | @keyframes fadeInRight {
1390 | from {
1391 | opacity: 0;
1392 | -webkit-transform: translate3d(100%, 0, 0);
1393 | transform: translate3d(100%, 0, 0);
1394 | }
1395 |
1396 | to {
1397 | opacity: 1;
1398 | -webkit-transform: none;
1399 | transform: none;
1400 | }
1401 | }
1402 |
1403 | .fadeInRight {
1404 | -webkit-animation-name: fadeInRight;
1405 | animation-name: fadeInRight;
1406 | }
1407 |
1408 | @-webkit-keyframes fadeInRightBig {
1409 | from {
1410 | opacity: 0;
1411 | -webkit-transform: translate3d(2000px, 0, 0);
1412 | transform: translate3d(2000px, 0, 0);
1413 | }
1414 |
1415 | to {
1416 | opacity: 1;
1417 | -webkit-transform: none;
1418 | transform: none;
1419 | }
1420 | }
1421 |
1422 | @keyframes fadeInRightBig {
1423 | from {
1424 | opacity: 0;
1425 | -webkit-transform: translate3d(2000px, 0, 0);
1426 | transform: translate3d(2000px, 0, 0);
1427 | }
1428 |
1429 | to {
1430 | opacity: 1;
1431 | -webkit-transform: none;
1432 | transform: none;
1433 | }
1434 | }
1435 |
1436 | .fadeInRightBig {
1437 | -webkit-animation-name: fadeInRightBig;
1438 | animation-name: fadeInRightBig;
1439 | }
1440 |
1441 | @-webkit-keyframes fadeInUp {
1442 | from {
1443 | opacity: 0;
1444 | -webkit-transform: translate3d(0, 100%, 0);
1445 | transform: translate3d(0, 100%, 0);
1446 | }
1447 |
1448 | to {
1449 | opacity: 1;
1450 | -webkit-transform: none;
1451 | transform: none;
1452 | }
1453 | }
1454 |
1455 | @keyframes fadeInUp {
1456 | from {
1457 | opacity: 0;
1458 | -webkit-transform: translate3d(0, 100%, 0);
1459 | transform: translate3d(0, 100%, 0);
1460 | }
1461 |
1462 | to {
1463 | opacity: 1;
1464 | -webkit-transform: none;
1465 | transform: none;
1466 | }
1467 | }
1468 |
1469 | .fadeInUp {
1470 | -webkit-animation-name: fadeInUp;
1471 | animation-name: fadeInUp;
1472 | }
1473 |
1474 | @-webkit-keyframes fadeInUpBig {
1475 | from {
1476 | opacity: 0;
1477 | -webkit-transform: translate3d(0, 2000px, 0);
1478 | transform: translate3d(0, 2000px, 0);
1479 | }
1480 |
1481 | to {
1482 | opacity: 1;
1483 | -webkit-transform: none;
1484 | transform: none;
1485 | }
1486 | }
1487 |
1488 | @keyframes fadeInUpBig {
1489 | from {
1490 | opacity: 0;
1491 | -webkit-transform: translate3d(0, 2000px, 0);
1492 | transform: translate3d(0, 2000px, 0);
1493 | }
1494 |
1495 | to {
1496 | opacity: 1;
1497 | -webkit-transform: none;
1498 | transform: none;
1499 | }
1500 | }
1501 |
1502 | .fadeInUpBig {
1503 | -webkit-animation-name: fadeInUpBig;
1504 | animation-name: fadeInUpBig;
1505 | }
1506 |
1507 | @-webkit-keyframes fadeOut {
1508 | from {
1509 | opacity: 1;
1510 | }
1511 |
1512 | to {
1513 | opacity: 0;
1514 | }
1515 | }
1516 |
1517 | @keyframes fadeOut {
1518 | from {
1519 | opacity: 1;
1520 | }
1521 |
1522 | to {
1523 | opacity: 0;
1524 | }
1525 | }
1526 |
1527 | .fadeOut {
1528 | -webkit-animation-name: fadeOut;
1529 | animation-name: fadeOut;
1530 | }
1531 |
1532 | @-webkit-keyframes fadeOutDown {
1533 | from {
1534 | opacity: 1;
1535 | }
1536 |
1537 | to {
1538 | opacity: 0;
1539 | -webkit-transform: translate3d(0, 100%, 0);
1540 | transform: translate3d(0, 100%, 0);
1541 | }
1542 | }
1543 |
1544 | @keyframes fadeOutDown {
1545 | from {
1546 | opacity: 1;
1547 | }
1548 |
1549 | to {
1550 | opacity: 0;
1551 | -webkit-transform: translate3d(0, 100%, 0);
1552 | transform: translate3d(0, 100%, 0);
1553 | }
1554 | }
1555 |
1556 | .fadeOutDown {
1557 | -webkit-animation-name: fadeOutDown;
1558 | animation-name: fadeOutDown;
1559 | }
1560 |
1561 | @-webkit-keyframes fadeOutDownBig {
1562 | from {
1563 | opacity: 1;
1564 | }
1565 |
1566 | to {
1567 | opacity: 0;
1568 | -webkit-transform: translate3d(0, 2000px, 0);
1569 | transform: translate3d(0, 2000px, 0);
1570 | }
1571 | }
1572 |
1573 | @keyframes fadeOutDownBig {
1574 | from {
1575 | opacity: 1;
1576 | }
1577 |
1578 | to {
1579 | opacity: 0;
1580 | -webkit-transform: translate3d(0, 2000px, 0);
1581 | transform: translate3d(0, 2000px, 0);
1582 | }
1583 | }
1584 |
1585 | .fadeOutDownBig {
1586 | -webkit-animation-name: fadeOutDownBig;
1587 | animation-name: fadeOutDownBig;
1588 | }
1589 |
1590 | @-webkit-keyframes fadeOutLeft {
1591 | from {
1592 | opacity: 1;
1593 | }
1594 |
1595 | to {
1596 | opacity: 0;
1597 | -webkit-transform: translate3d(-100%, 0, 0);
1598 | transform: translate3d(-100%, 0, 0);
1599 | }
1600 | }
1601 |
1602 | @keyframes fadeOutLeft {
1603 | from {
1604 | opacity: 1;
1605 | }
1606 |
1607 | to {
1608 | opacity: 0;
1609 | -webkit-transform: translate3d(-100%, 0, 0);
1610 | transform: translate3d(-100%, 0, 0);
1611 | }
1612 | }
1613 |
1614 | .fadeOutLeft {
1615 | -webkit-animation-name: fadeOutLeft;
1616 | animation-name: fadeOutLeft;
1617 | }
1618 |
1619 | @-webkit-keyframes fadeOutLeftBig {
1620 | from {
1621 | opacity: 1;
1622 | }
1623 |
1624 | to {
1625 | opacity: 0;
1626 | -webkit-transform: translate3d(-2000px, 0, 0);
1627 | transform: translate3d(-2000px, 0, 0);
1628 | }
1629 | }
1630 |
1631 | @keyframes fadeOutLeftBig {
1632 | from {
1633 | opacity: 1;
1634 | }
1635 |
1636 | to {
1637 | opacity: 0;
1638 | -webkit-transform: translate3d(-2000px, 0, 0);
1639 | transform: translate3d(-2000px, 0, 0);
1640 | }
1641 | }
1642 |
1643 | .fadeOutLeftBig {
1644 | -webkit-animation-name: fadeOutLeftBig;
1645 | animation-name: fadeOutLeftBig;
1646 | }
1647 |
1648 | @-webkit-keyframes fadeOutRight {
1649 | from {
1650 | opacity: 1;
1651 | }
1652 |
1653 | to {
1654 | opacity: 0;
1655 | -webkit-transform: translate3d(100%, 0, 0);
1656 | transform: translate3d(100%, 0, 0);
1657 | }
1658 | }
1659 |
1660 | @keyframes fadeOutRight {
1661 | from {
1662 | opacity: 1;
1663 | }
1664 |
1665 | to {
1666 | opacity: 0;
1667 | -webkit-transform: translate3d(100%, 0, 0);
1668 | transform: translate3d(100%, 0, 0);
1669 | }
1670 | }
1671 |
1672 | .fadeOutRight {
1673 | -webkit-animation-name: fadeOutRight;
1674 | animation-name: fadeOutRight;
1675 | }
1676 |
1677 | @-webkit-keyframes fadeOutRightBig {
1678 | from {
1679 | opacity: 1;
1680 | }
1681 |
1682 | to {
1683 | opacity: 0;
1684 | -webkit-transform: translate3d(2000px, 0, 0);
1685 | transform: translate3d(2000px, 0, 0);
1686 | }
1687 | }
1688 |
1689 | @keyframes fadeOutRightBig {
1690 | from {
1691 | opacity: 1;
1692 | }
1693 |
1694 | to {
1695 | opacity: 0;
1696 | -webkit-transform: translate3d(2000px, 0, 0);
1697 | transform: translate3d(2000px, 0, 0);
1698 | }
1699 | }
1700 |
1701 | .fadeOutRightBig {
1702 | -webkit-animation-name: fadeOutRightBig;
1703 | animation-name: fadeOutRightBig;
1704 | }
1705 |
1706 | @-webkit-keyframes fadeOutUp {
1707 | from {
1708 | opacity: 1;
1709 | }
1710 |
1711 | to {
1712 | opacity: 0;
1713 | -webkit-transform: translate3d(0, -100%, 0);
1714 | transform: translate3d(0, -100%, 0);
1715 | }
1716 | }
1717 |
1718 | @keyframes fadeOutUp {
1719 | from {
1720 | opacity: 1;
1721 | }
1722 |
1723 | to {
1724 | opacity: 0;
1725 | -webkit-transform: translate3d(0, -100%, 0);
1726 | transform: translate3d(0, -100%, 0);
1727 | }
1728 | }
1729 |
1730 | .fadeOutUp {
1731 | -webkit-animation-name: fadeOutUp;
1732 | animation-name: fadeOutUp;
1733 | }
1734 |
1735 | @-webkit-keyframes fadeOutUpBig {
1736 | from {
1737 | opacity: 1;
1738 | }
1739 |
1740 | to {
1741 | opacity: 0;
1742 | -webkit-transform: translate3d(0, -2000px, 0);
1743 | transform: translate3d(0, -2000px, 0);
1744 | }
1745 | }
1746 |
1747 | @keyframes fadeOutUpBig {
1748 | from {
1749 | opacity: 1;
1750 | }
1751 |
1752 | to {
1753 | opacity: 0;
1754 | -webkit-transform: translate3d(0, -2000px, 0);
1755 | transform: translate3d(0, -2000px, 0);
1756 | }
1757 | }
1758 |
1759 | .fadeOutUpBig {
1760 | -webkit-animation-name: fadeOutUpBig;
1761 | animation-name: fadeOutUpBig;
1762 | }
1763 |
1764 | @-webkit-keyframes flip {
1765 | from {
1766 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1767 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1768 | -webkit-animation-timing-function: ease-out;
1769 | animation-timing-function: ease-out;
1770 | }
1771 |
1772 | 40% {
1773 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1774 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1775 | -webkit-animation-timing-function: ease-out;
1776 | animation-timing-function: ease-out;
1777 | }
1778 |
1779 | 50% {
1780 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1781 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1782 | -webkit-animation-timing-function: ease-in;
1783 | animation-timing-function: ease-in;
1784 | }
1785 |
1786 | 80% {
1787 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1788 | transform: perspective(400px) scale3d(.95, .95, .95);
1789 | -webkit-animation-timing-function: ease-in;
1790 | animation-timing-function: ease-in;
1791 | }
1792 |
1793 | to {
1794 | -webkit-transform: perspective(400px);
1795 | transform: perspective(400px);
1796 | -webkit-animation-timing-function: ease-in;
1797 | animation-timing-function: ease-in;
1798 | }
1799 | }
1800 |
1801 | @keyframes flip {
1802 | from {
1803 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1804 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1805 | -webkit-animation-timing-function: ease-out;
1806 | animation-timing-function: ease-out;
1807 | }
1808 |
1809 | 40% {
1810 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1811 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1812 | -webkit-animation-timing-function: ease-out;
1813 | animation-timing-function: ease-out;
1814 | }
1815 |
1816 | 50% {
1817 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1818 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1819 | -webkit-animation-timing-function: ease-in;
1820 | animation-timing-function: ease-in;
1821 | }
1822 |
1823 | 80% {
1824 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1825 | transform: perspective(400px) scale3d(.95, .95, .95);
1826 | -webkit-animation-timing-function: ease-in;
1827 | animation-timing-function: ease-in;
1828 | }
1829 |
1830 | to {
1831 | -webkit-transform: perspective(400px);
1832 | transform: perspective(400px);
1833 | -webkit-animation-timing-function: ease-in;
1834 | animation-timing-function: ease-in;
1835 | }
1836 | }
1837 |
1838 | .animated.flip {
1839 | -webkit-backface-visibility: visible;
1840 | backface-visibility: visible;
1841 | -webkit-animation-name: flip;
1842 | animation-name: flip;
1843 | }
1844 |
1845 | @-webkit-keyframes flipInX {
1846 | from {
1847 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1848 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1849 | -webkit-animation-timing-function: ease-in;
1850 | animation-timing-function: ease-in;
1851 | opacity: 0;
1852 | }
1853 |
1854 | 40% {
1855 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1856 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1857 | -webkit-animation-timing-function: ease-in;
1858 | animation-timing-function: ease-in;
1859 | }
1860 |
1861 | 60% {
1862 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1863 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1864 | opacity: 1;
1865 | }
1866 |
1867 | 80% {
1868 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1869 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1870 | }
1871 |
1872 | to {
1873 | -webkit-transform: perspective(400px);
1874 | transform: perspective(400px);
1875 | }
1876 | }
1877 |
1878 | @keyframes flipInX {
1879 | from {
1880 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1881 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1882 | -webkit-animation-timing-function: ease-in;
1883 | animation-timing-function: ease-in;
1884 | opacity: 0;
1885 | }
1886 |
1887 | 40% {
1888 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1889 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1890 | -webkit-animation-timing-function: ease-in;
1891 | animation-timing-function: ease-in;
1892 | }
1893 |
1894 | 60% {
1895 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1896 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1897 | opacity: 1;
1898 | }
1899 |
1900 | 80% {
1901 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1902 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1903 | }
1904 |
1905 | to {
1906 | -webkit-transform: perspective(400px);
1907 | transform: perspective(400px);
1908 | }
1909 | }
1910 |
1911 | .flipInX {
1912 | -webkit-backface-visibility: visible !important;
1913 | backface-visibility: visible !important;
1914 | -webkit-animation-name: flipInX;
1915 | animation-name: flipInX;
1916 | }
1917 |
1918 | @-webkit-keyframes flipInY {
1919 | from {
1920 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1921 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1922 | -webkit-animation-timing-function: ease-in;
1923 | animation-timing-function: ease-in;
1924 | opacity: 0;
1925 | }
1926 |
1927 | 40% {
1928 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1929 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1930 | -webkit-animation-timing-function: ease-in;
1931 | animation-timing-function: ease-in;
1932 | }
1933 |
1934 | 60% {
1935 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1936 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1937 | opacity: 1;
1938 | }
1939 |
1940 | 80% {
1941 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1942 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1943 | }
1944 |
1945 | to {
1946 | -webkit-transform: perspective(400px);
1947 | transform: perspective(400px);
1948 | }
1949 | }
1950 |
1951 | @keyframes flipInY {
1952 | from {
1953 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1954 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1955 | -webkit-animation-timing-function: ease-in;
1956 | animation-timing-function: ease-in;
1957 | opacity: 0;
1958 | }
1959 |
1960 | 40% {
1961 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1962 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1963 | -webkit-animation-timing-function: ease-in;
1964 | animation-timing-function: ease-in;
1965 | }
1966 |
1967 | 60% {
1968 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1969 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1970 | opacity: 1;
1971 | }
1972 |
1973 | 80% {
1974 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1975 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1976 | }
1977 |
1978 | to {
1979 | -webkit-transform: perspective(400px);
1980 | transform: perspective(400px);
1981 | }
1982 | }
1983 |
1984 | .flipInY {
1985 | -webkit-backface-visibility: visible !important;
1986 | backface-visibility: visible !important;
1987 | -webkit-animation-name: flipInY;
1988 | animation-name: flipInY;
1989 | }
1990 |
1991 | @-webkit-keyframes flipOutX {
1992 | from {
1993 | -webkit-transform: perspective(400px);
1994 | transform: perspective(400px);
1995 | }
1996 |
1997 | 30% {
1998 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1999 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2000 | opacity: 1;
2001 | }
2002 |
2003 | to {
2004 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2005 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2006 | opacity: 0;
2007 | }
2008 | }
2009 |
2010 | @keyframes flipOutX {
2011 | from {
2012 | -webkit-transform: perspective(400px);
2013 | transform: perspective(400px);
2014 | }
2015 |
2016 | 30% {
2017 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2018 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2019 | opacity: 1;
2020 | }
2021 |
2022 | to {
2023 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2024 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2025 | opacity: 0;
2026 | }
2027 | }
2028 |
2029 | .flipOutX {
2030 | -webkit-animation-name: flipOutX;
2031 | animation-name: flipOutX;
2032 | -webkit-backface-visibility: visible !important;
2033 | backface-visibility: visible !important;
2034 | }
2035 |
2036 | @-webkit-keyframes flipOutY {
2037 | from {
2038 | -webkit-transform: perspective(400px);
2039 | transform: perspective(400px);
2040 | }
2041 |
2042 | 30% {
2043 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2044 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2045 | opacity: 1;
2046 | }
2047 |
2048 | to {
2049 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2050 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2051 | opacity: 0;
2052 | }
2053 | }
2054 |
2055 | @keyframes flipOutY {
2056 | from {
2057 | -webkit-transform: perspective(400px);
2058 | transform: perspective(400px);
2059 | }
2060 |
2061 | 30% {
2062 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2063 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2064 | opacity: 1;
2065 | }
2066 |
2067 | to {
2068 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2069 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2070 | opacity: 0;
2071 | }
2072 | }
2073 |
2074 | .flipOutY {
2075 | -webkit-backface-visibility: visible !important;
2076 | backface-visibility: visible !important;
2077 | -webkit-animation-name: flipOutY;
2078 | animation-name: flipOutY;
2079 | }
2080 |
2081 | @-webkit-keyframes lightSpeedIn {
2082 | from {
2083 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
2084 | transform: translate3d(100%, 0, 0) skewX(-30deg);
2085 | opacity: 0;
2086 | }
2087 |
2088 | 60% {
2089 | -webkit-transform: skewX(20deg);
2090 | transform: skewX(20deg);
2091 | opacity: 1;
2092 | }
2093 |
2094 | 80% {
2095 | -webkit-transform: skewX(-5deg);
2096 | transform: skewX(-5deg);
2097 | opacity: 1;
2098 | }
2099 |
2100 | to {
2101 | -webkit-transform: none;
2102 | transform: none;
2103 | opacity: 1;
2104 | }
2105 | }
2106 |
2107 | @keyframes lightSpeedIn {
2108 | from {
2109 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
2110 | transform: translate3d(100%, 0, 0) skewX(-30deg);
2111 | opacity: 0;
2112 | }
2113 |
2114 | 60% {
2115 | -webkit-transform: skewX(20deg);
2116 | transform: skewX(20deg);
2117 | opacity: 1;
2118 | }
2119 |
2120 | 80% {
2121 | -webkit-transform: skewX(-5deg);
2122 | transform: skewX(-5deg);
2123 | opacity: 1;
2124 | }
2125 |
2126 | to {
2127 | -webkit-transform: none;
2128 | transform: none;
2129 | opacity: 1;
2130 | }
2131 | }
2132 |
2133 | .lightSpeedIn {
2134 | -webkit-animation-name: lightSpeedIn;
2135 | animation-name: lightSpeedIn;
2136 | -webkit-animation-timing-function: ease-out;
2137 | animation-timing-function: ease-out;
2138 | }
2139 |
2140 | @-webkit-keyframes lightSpeedOut {
2141 | from {
2142 | opacity: 1;
2143 | }
2144 |
2145 | to {
2146 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2147 | transform: translate3d(100%, 0, 0) skewX(30deg);
2148 | opacity: 0;
2149 | }
2150 | }
2151 |
2152 | @keyframes lightSpeedOut {
2153 | from {
2154 | opacity: 1;
2155 | }
2156 |
2157 | to {
2158 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2159 | transform: translate3d(100%, 0, 0) skewX(30deg);
2160 | opacity: 0;
2161 | }
2162 | }
2163 |
2164 | .lightSpeedOut {
2165 | -webkit-animation-name: lightSpeedOut;
2166 | animation-name: lightSpeedOut;
2167 | -webkit-animation-timing-function: ease-in;
2168 | animation-timing-function: ease-in;
2169 | }
2170 |
2171 | @-webkit-keyframes rotateIn {
2172 | from {
2173 | -webkit-transform-origin: center;
2174 | transform-origin: center;
2175 | -webkit-transform: rotate3d(0, 0, 1, -200deg);
2176 | transform: rotate3d(0, 0, 1, -200deg);
2177 | opacity: 0;
2178 | }
2179 |
2180 | to {
2181 | -webkit-transform-origin: center;
2182 | transform-origin: center;
2183 | -webkit-transform: none;
2184 | transform: none;
2185 | opacity: 1;
2186 | }
2187 | }
2188 |
2189 | @keyframes rotateIn {
2190 | from {
2191 | -webkit-transform-origin: center;
2192 | transform-origin: center;
2193 | -webkit-transform: rotate3d(0, 0, 1, -200deg);
2194 | transform: rotate3d(0, 0, 1, -200deg);
2195 | opacity: 0;
2196 | }
2197 |
2198 | to {
2199 | -webkit-transform-origin: center;
2200 | transform-origin: center;
2201 | -webkit-transform: none;
2202 | transform: none;
2203 | opacity: 1;
2204 | }
2205 | }
2206 |
2207 | .rotateIn {
2208 | -webkit-animation-name: rotateIn;
2209 | animation-name: rotateIn;
2210 | }
2211 |
2212 | @-webkit-keyframes rotateInDownLeft {
2213 | from {
2214 | -webkit-transform-origin: left bottom;
2215 | transform-origin: left bottom;
2216 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2217 | transform: rotate3d(0, 0, 1, -45deg);
2218 | opacity: 0;
2219 | }
2220 |
2221 | to {
2222 | -webkit-transform-origin: left bottom;
2223 | transform-origin: left bottom;
2224 | -webkit-transform: none;
2225 | transform: none;
2226 | opacity: 1;
2227 | }
2228 | }
2229 |
2230 | @keyframes rotateInDownLeft {
2231 | from {
2232 | -webkit-transform-origin: left bottom;
2233 | transform-origin: left bottom;
2234 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2235 | transform: rotate3d(0, 0, 1, -45deg);
2236 | opacity: 0;
2237 | }
2238 |
2239 | to {
2240 | -webkit-transform-origin: left bottom;
2241 | transform-origin: left bottom;
2242 | -webkit-transform: none;
2243 | transform: none;
2244 | opacity: 1;
2245 | }
2246 | }
2247 |
2248 | .rotateInDownLeft {
2249 | -webkit-animation-name: rotateInDownLeft;
2250 | animation-name: rotateInDownLeft;
2251 | }
2252 |
2253 | @-webkit-keyframes rotateInDownRight {
2254 | from {
2255 | -webkit-transform-origin: right bottom;
2256 | transform-origin: right bottom;
2257 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2258 | transform: rotate3d(0, 0, 1, 45deg);
2259 | opacity: 0;
2260 | }
2261 |
2262 | to {
2263 | -webkit-transform-origin: right bottom;
2264 | transform-origin: right bottom;
2265 | -webkit-transform: none;
2266 | transform: none;
2267 | opacity: 1;
2268 | }
2269 | }
2270 |
2271 | @keyframes rotateInDownRight {
2272 | from {
2273 | -webkit-transform-origin: right bottom;
2274 | transform-origin: right bottom;
2275 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2276 | transform: rotate3d(0, 0, 1, 45deg);
2277 | opacity: 0;
2278 | }
2279 |
2280 | to {
2281 | -webkit-transform-origin: right bottom;
2282 | transform-origin: right bottom;
2283 | -webkit-transform: none;
2284 | transform: none;
2285 | opacity: 1;
2286 | }
2287 | }
2288 |
2289 | .rotateInDownRight {
2290 | -webkit-animation-name: rotateInDownRight;
2291 | animation-name: rotateInDownRight;
2292 | }
2293 |
2294 | @-webkit-keyframes rotateInUpLeft {
2295 | from {
2296 | -webkit-transform-origin: left bottom;
2297 | transform-origin: left bottom;
2298 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2299 | transform: rotate3d(0, 0, 1, 45deg);
2300 | opacity: 0;
2301 | }
2302 |
2303 | to {
2304 | -webkit-transform-origin: left bottom;
2305 | transform-origin: left bottom;
2306 | -webkit-transform: none;
2307 | transform: none;
2308 | opacity: 1;
2309 | }
2310 | }
2311 |
2312 | @keyframes rotateInUpLeft {
2313 | from {
2314 | -webkit-transform-origin: left bottom;
2315 | transform-origin: left bottom;
2316 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2317 | transform: rotate3d(0, 0, 1, 45deg);
2318 | opacity: 0;
2319 | }
2320 |
2321 | to {
2322 | -webkit-transform-origin: left bottom;
2323 | transform-origin: left bottom;
2324 | -webkit-transform: none;
2325 | transform: none;
2326 | opacity: 1;
2327 | }
2328 | }
2329 |
2330 | .rotateInUpLeft {
2331 | -webkit-animation-name: rotateInUpLeft;
2332 | animation-name: rotateInUpLeft;
2333 | }
2334 |
2335 | @-webkit-keyframes rotateInUpRight {
2336 | from {
2337 | -webkit-transform-origin: right bottom;
2338 | transform-origin: right bottom;
2339 | -webkit-transform: rotate3d(0, 0, 1, -90deg);
2340 | transform: rotate3d(0, 0, 1, -90deg);
2341 | opacity: 0;
2342 | }
2343 |
2344 | to {
2345 | -webkit-transform-origin: right bottom;
2346 | transform-origin: right bottom;
2347 | -webkit-transform: none;
2348 | transform: none;
2349 | opacity: 1;
2350 | }
2351 | }
2352 |
2353 | @keyframes rotateInUpRight {
2354 | from {
2355 | -webkit-transform-origin: right bottom;
2356 | transform-origin: right bottom;
2357 | -webkit-transform: rotate3d(0, 0, 1, -90deg);
2358 | transform: rotate3d(0, 0, 1, -90deg);
2359 | opacity: 0;
2360 | }
2361 |
2362 | to {
2363 | -webkit-transform-origin: right bottom;
2364 | transform-origin: right bottom;
2365 | -webkit-transform: none;
2366 | transform: none;
2367 | opacity: 1;
2368 | }
2369 | }
2370 |
2371 | .rotateInUpRight {
2372 | -webkit-animation-name: rotateInUpRight;
2373 | animation-name: rotateInUpRight;
2374 | }
2375 |
2376 | @-webkit-keyframes rotateOut {
2377 | from {
2378 | -webkit-transform-origin: center;
2379 | transform-origin: center;
2380 | opacity: 1;
2381 | }
2382 |
2383 | to {
2384 | -webkit-transform-origin: center;
2385 | transform-origin: center;
2386 | -webkit-transform: rotate3d(0, 0, 1, 200deg);
2387 | transform: rotate3d(0, 0, 1, 200deg);
2388 | opacity: 0;
2389 | }
2390 | }
2391 |
2392 | @keyframes rotateOut {
2393 | from {
2394 | -webkit-transform-origin: center;
2395 | transform-origin: center;
2396 | opacity: 1;
2397 | }
2398 |
2399 | to {
2400 | -webkit-transform-origin: center;
2401 | transform-origin: center;
2402 | -webkit-transform: rotate3d(0, 0, 1, 200deg);
2403 | transform: rotate3d(0, 0, 1, 200deg);
2404 | opacity: 0;
2405 | }
2406 | }
2407 |
2408 | .rotateOut {
2409 | -webkit-animation-name: rotateOut;
2410 | animation-name: rotateOut;
2411 | }
2412 |
2413 | @-webkit-keyframes rotateOutDownLeft {
2414 | from {
2415 | -webkit-transform-origin: left bottom;
2416 | transform-origin: left bottom;
2417 | opacity: 1;
2418 | }
2419 |
2420 | to {
2421 | -webkit-transform-origin: left bottom;
2422 | transform-origin: left bottom;
2423 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2424 | transform: rotate3d(0, 0, 1, 45deg);
2425 | opacity: 0;
2426 | }
2427 | }
2428 |
2429 | @keyframes rotateOutDownLeft {
2430 | from {
2431 | -webkit-transform-origin: left bottom;
2432 | transform-origin: left bottom;
2433 | opacity: 1;
2434 | }
2435 |
2436 | to {
2437 | -webkit-transform-origin: left bottom;
2438 | transform-origin: left bottom;
2439 | -webkit-transform: rotate3d(0, 0, 1, 45deg);
2440 | transform: rotate3d(0, 0, 1, 45deg);
2441 | opacity: 0;
2442 | }
2443 | }
2444 |
2445 | .rotateOutDownLeft {
2446 | -webkit-animation-name: rotateOutDownLeft;
2447 | animation-name: rotateOutDownLeft;
2448 | }
2449 |
2450 | @-webkit-keyframes rotateOutDownRight {
2451 | from {
2452 | -webkit-transform-origin: right bottom;
2453 | transform-origin: right bottom;
2454 | opacity: 1;
2455 | }
2456 |
2457 | to {
2458 | -webkit-transform-origin: right bottom;
2459 | transform-origin: right bottom;
2460 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2461 | transform: rotate3d(0, 0, 1, -45deg);
2462 | opacity: 0;
2463 | }
2464 | }
2465 |
2466 | @keyframes rotateOutDownRight {
2467 | from {
2468 | -webkit-transform-origin: right bottom;
2469 | transform-origin: right bottom;
2470 | opacity: 1;
2471 | }
2472 |
2473 | to {
2474 | -webkit-transform-origin: right bottom;
2475 | transform-origin: right bottom;
2476 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2477 | transform: rotate3d(0, 0, 1, -45deg);
2478 | opacity: 0;
2479 | }
2480 | }
2481 |
2482 | .rotateOutDownRight {
2483 | -webkit-animation-name: rotateOutDownRight;
2484 | animation-name: rotateOutDownRight;
2485 | }
2486 |
2487 | @-webkit-keyframes rotateOutUpLeft {
2488 | from {
2489 | -webkit-transform-origin: left bottom;
2490 | transform-origin: left bottom;
2491 | opacity: 1;
2492 | }
2493 |
2494 | to {
2495 | -webkit-transform-origin: left bottom;
2496 | transform-origin: left bottom;
2497 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2498 | transform: rotate3d(0, 0, 1, -45deg);
2499 | opacity: 0;
2500 | }
2501 | }
2502 |
2503 | @keyframes rotateOutUpLeft {
2504 | from {
2505 | -webkit-transform-origin: left bottom;
2506 | transform-origin: left bottom;
2507 | opacity: 1;
2508 | }
2509 |
2510 | to {
2511 | -webkit-transform-origin: left bottom;
2512 | transform-origin: left bottom;
2513 | -webkit-transform: rotate3d(0, 0, 1, -45deg);
2514 | transform: rotate3d(0, 0, 1, -45deg);
2515 | opacity: 0;
2516 | }
2517 | }
2518 |
2519 | .rotateOutUpLeft {
2520 | -webkit-animation-name: rotateOutUpLeft;
2521 | animation-name: rotateOutUpLeft;
2522 | }
2523 |
2524 | @-webkit-keyframes rotateOutUpRight {
2525 | from {
2526 | -webkit-transform-origin: right bottom;
2527 | transform-origin: right bottom;
2528 | opacity: 1;
2529 | }
2530 |
2531 | to {
2532 | -webkit-transform-origin: right bottom;
2533 | transform-origin: right bottom;
2534 | -webkit-transform: rotate3d(0, 0, 1, 90deg);
2535 | transform: rotate3d(0, 0, 1, 90deg);
2536 | opacity: 0;
2537 | }
2538 | }
2539 |
2540 | @keyframes rotateOutUpRight {
2541 | from {
2542 | -webkit-transform-origin: right bottom;
2543 | transform-origin: right bottom;
2544 | opacity: 1;
2545 | }
2546 |
2547 | to {
2548 | -webkit-transform-origin: right bottom;
2549 | transform-origin: right bottom;
2550 | -webkit-transform: rotate3d(0, 0, 1, 90deg);
2551 | transform: rotate3d(0, 0, 1, 90deg);
2552 | opacity: 0;
2553 | }
2554 | }
2555 |
2556 | .rotateOutUpRight {
2557 | -webkit-animation-name: rotateOutUpRight;
2558 | animation-name: rotateOutUpRight;
2559 | }
2560 |
2561 | @-webkit-keyframes hinge {
2562 | 0% {
2563 | -webkit-transform-origin: top left;
2564 | transform-origin: top left;
2565 | -webkit-animation-timing-function: ease-in-out;
2566 | animation-timing-function: ease-in-out;
2567 | }
2568 |
2569 | 20%, 60% {
2570 | -webkit-transform: rotate3d(0, 0, 1, 80deg);
2571 | transform: rotate3d(0, 0, 1, 80deg);
2572 | -webkit-transform-origin: top left;
2573 | transform-origin: top left;
2574 | -webkit-animation-timing-function: ease-in-out;
2575 | animation-timing-function: ease-in-out;
2576 | }
2577 |
2578 | 40%, 80% {
2579 | -webkit-transform: rotate3d(0, 0, 1, 60deg);
2580 | transform: rotate3d(0, 0, 1, 60deg);
2581 | -webkit-transform-origin: top left;
2582 | transform-origin: top left;
2583 | -webkit-animation-timing-function: ease-in-out;
2584 | animation-timing-function: ease-in-out;
2585 | opacity: 1;
2586 | }
2587 |
2588 | to {
2589 | -webkit-transform: translate3d(0, 700px, 0);
2590 | transform: translate3d(0, 700px, 0);
2591 | opacity: 0;
2592 | }
2593 | }
2594 |
2595 | @keyframes hinge {
2596 | 0% {
2597 | -webkit-transform-origin: top left;
2598 | transform-origin: top left;
2599 | -webkit-animation-timing-function: ease-in-out;
2600 | animation-timing-function: ease-in-out;
2601 | }
2602 |
2603 | 20%, 60% {
2604 | -webkit-transform: rotate3d(0, 0, 1, 80deg);
2605 | transform: rotate3d(0, 0, 1, 80deg);
2606 | -webkit-transform-origin: top left;
2607 | transform-origin: top left;
2608 | -webkit-animation-timing-function: ease-in-out;
2609 | animation-timing-function: ease-in-out;
2610 | }
2611 |
2612 | 40%, 80% {
2613 | -webkit-transform: rotate3d(0, 0, 1, 60deg);
2614 | transform: rotate3d(0, 0, 1, 60deg);
2615 | -webkit-transform-origin: top left;
2616 | transform-origin: top left;
2617 | -webkit-animation-timing-function: ease-in-out;
2618 | animation-timing-function: ease-in-out;
2619 | opacity: 1;
2620 | }
2621 |
2622 | to {
2623 | -webkit-transform: translate3d(0, 700px, 0);
2624 | transform: translate3d(0, 700px, 0);
2625 | opacity: 0;
2626 | }
2627 | }
2628 |
2629 | .hinge {
2630 | -webkit-animation-name: hinge;
2631 | animation-name: hinge;
2632 | }
2633 |
2634 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2635 |
2636 | @-webkit-keyframes rollIn {
2637 | from {
2638 | opacity: 0;
2639 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2640 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2641 | }
2642 |
2643 | to {
2644 | opacity: 1;
2645 | -webkit-transform: none;
2646 | transform: none;
2647 | }
2648 | }
2649 |
2650 | @keyframes rollIn {
2651 | from {
2652 | opacity: 0;
2653 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2654 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2655 | }
2656 |
2657 | to {
2658 | opacity: 1;
2659 | -webkit-transform: none;
2660 | transform: none;
2661 | }
2662 | }
2663 |
2664 | .rollIn {
2665 | -webkit-animation-name: rollIn;
2666 | animation-name: rollIn;
2667 | }
2668 |
2669 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2670 |
2671 | @-webkit-keyframes rollOut {
2672 | from {
2673 | opacity: 1;
2674 | }
2675 |
2676 | to {
2677 | opacity: 0;
2678 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2679 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2680 | }
2681 | }
2682 |
2683 | @keyframes rollOut {
2684 | from {
2685 | opacity: 1;
2686 | }
2687 |
2688 | to {
2689 | opacity: 0;
2690 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2691 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2692 | }
2693 | }
2694 |
2695 | .rollOut {
2696 | -webkit-animation-name: rollOut;
2697 | animation-name: rollOut;
2698 | }
2699 |
2700 | @-webkit-keyframes zoomIn {
2701 | from {
2702 | opacity: 0;
2703 | -webkit-transform: scale3d(.3, .3, .3);
2704 | transform: scale3d(.3, .3, .3);
2705 | }
2706 |
2707 | 50% {
2708 | opacity: 1;
2709 | }
2710 | }
2711 |
2712 | @keyframes zoomIn {
2713 | from {
2714 | opacity: 0;
2715 | -webkit-transform: scale3d(.3, .3, .3);
2716 | transform: scale3d(.3, .3, .3);
2717 | }
2718 |
2719 | 50% {
2720 | opacity: 1;
2721 | }
2722 | }
2723 |
2724 | .zoomIn {
2725 | -webkit-animation-name: zoomIn;
2726 | animation-name: zoomIn;
2727 | }
2728 |
2729 | @-webkit-keyframes zoomInDown {
2730 | from {
2731 | opacity: 0;
2732 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2733 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2734 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2735 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2736 | }
2737 |
2738 | 60% {
2739 | opacity: 1;
2740 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2741 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2742 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2743 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2744 | }
2745 | }
2746 |
2747 | @keyframes zoomInDown {
2748 | from {
2749 | opacity: 0;
2750 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2751 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2752 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2753 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2754 | }
2755 |
2756 | 60% {
2757 | opacity: 1;
2758 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2759 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2760 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2761 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2762 | }
2763 | }
2764 |
2765 | .zoomInDown {
2766 | -webkit-animation-name: zoomInDown;
2767 | animation-name: zoomInDown;
2768 | }
2769 |
2770 | @-webkit-keyframes zoomInLeft {
2771 | from {
2772 | opacity: 0;
2773 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2774 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2775 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2776 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2777 | }
2778 |
2779 | 60% {
2780 | opacity: 1;
2781 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2782 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2783 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2784 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2785 | }
2786 | }
2787 |
2788 | @keyframes zoomInLeft {
2789 | from {
2790 | opacity: 0;
2791 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2792 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2793 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2794 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2795 | }
2796 |
2797 | 60% {
2798 | opacity: 1;
2799 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2800 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2801 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2802 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2803 | }
2804 | }
2805 |
2806 | .zoomInLeft {
2807 | -webkit-animation-name: zoomInLeft;
2808 | animation-name: zoomInLeft;
2809 | }
2810 |
2811 | @-webkit-keyframes zoomInRight {
2812 | from {
2813 | opacity: 0;
2814 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2815 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2816 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2817 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2818 | }
2819 |
2820 | 60% {
2821 | opacity: 1;
2822 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2823 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2824 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2825 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2826 | }
2827 | }
2828 |
2829 | @keyframes zoomInRight {
2830 | from {
2831 | opacity: 0;
2832 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2833 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2834 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2835 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2836 | }
2837 |
2838 | 60% {
2839 | opacity: 1;
2840 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2841 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2842 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2843 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2844 | }
2845 | }
2846 |
2847 | .zoomInRight {
2848 | -webkit-animation-name: zoomInRight;
2849 | animation-name: zoomInRight;
2850 | }
2851 |
2852 | @-webkit-keyframes zoomInUp {
2853 | from {
2854 | opacity: 0;
2855 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2856 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2857 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2858 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2859 | }
2860 |
2861 | 60% {
2862 | opacity: 1;
2863 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2864 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2865 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2866 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2867 | }
2868 | }
2869 |
2870 | @keyframes zoomInUp {
2871 | from {
2872 | opacity: 0;
2873 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2874 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2875 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2876 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2877 | }
2878 |
2879 | 60% {
2880 | opacity: 1;
2881 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2882 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2883 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2884 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2885 | }
2886 | }
2887 |
2888 | .zoomInUp {
2889 | -webkit-animation-name: zoomInUp;
2890 | animation-name: zoomInUp;
2891 | }
2892 |
2893 | @-webkit-keyframes zoomOut {
2894 | from {
2895 | opacity: 1;
2896 | }
2897 |
2898 | 50% {
2899 | opacity: 0;
2900 | -webkit-transform: scale3d(.3, .3, .3);
2901 | transform: scale3d(.3, .3, .3);
2902 | }
2903 |
2904 | to {
2905 | opacity: 0;
2906 | }
2907 | }
2908 |
2909 | @keyframes zoomOut {
2910 | from {
2911 | opacity: 1;
2912 | }
2913 |
2914 | 50% {
2915 | opacity: 0;
2916 | -webkit-transform: scale3d(.3, .3, .3);
2917 | transform: scale3d(.3, .3, .3);
2918 | }
2919 |
2920 | to {
2921 | opacity: 0;
2922 | }
2923 | }
2924 |
2925 | .zoomOut {
2926 | -webkit-animation-name: zoomOut;
2927 | animation-name: zoomOut;
2928 | }
2929 |
2930 | @-webkit-keyframes zoomOutDown {
2931 | 40% {
2932 | opacity: 1;
2933 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2934 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2935 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2936 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2937 | }
2938 |
2939 | to {
2940 | opacity: 0;
2941 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2942 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2943 | -webkit-transform-origin: center bottom;
2944 | transform-origin: center bottom;
2945 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2946 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2947 | }
2948 | }
2949 |
2950 | @keyframes zoomOutDown {
2951 | 40% {
2952 | opacity: 1;
2953 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2954 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2955 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2956 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2957 | }
2958 |
2959 | to {
2960 | opacity: 0;
2961 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2962 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2963 | -webkit-transform-origin: center bottom;
2964 | transform-origin: center bottom;
2965 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2966 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2967 | }
2968 | }
2969 |
2970 | .zoomOutDown {
2971 | -webkit-animation-name: zoomOutDown;
2972 | animation-name: zoomOutDown;
2973 | }
2974 |
2975 | @-webkit-keyframes zoomOutLeft {
2976 | 40% {
2977 | opacity: 1;
2978 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2979 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2980 | }
2981 |
2982 | to {
2983 | opacity: 0;
2984 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2985 | transform: scale(.1) translate3d(-2000px, 0, 0);
2986 | -webkit-transform-origin: left center;
2987 | transform-origin: left center;
2988 | }
2989 | }
2990 |
2991 | @keyframes zoomOutLeft {
2992 | 40% {
2993 | opacity: 1;
2994 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2995 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2996 | }
2997 |
2998 | to {
2999 | opacity: 0;
3000 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
3001 | transform: scale(.1) translate3d(-2000px, 0, 0);
3002 | -webkit-transform-origin: left center;
3003 | transform-origin: left center;
3004 | }
3005 | }
3006 |
3007 | .zoomOutLeft {
3008 | -webkit-animation-name: zoomOutLeft;
3009 | animation-name: zoomOutLeft;
3010 | }
3011 |
3012 | @-webkit-keyframes zoomOutRight {
3013 | 40% {
3014 | opacity: 1;
3015 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3016 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3017 | }
3018 |
3019 | to {
3020 | opacity: 0;
3021 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
3022 | transform: scale(.1) translate3d(2000px, 0, 0);
3023 | -webkit-transform-origin: right center;
3024 | transform-origin: right center;
3025 | }
3026 | }
3027 |
3028 | @keyframes zoomOutRight {
3029 | 40% {
3030 | opacity: 1;
3031 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3032 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3033 | }
3034 |
3035 | to {
3036 | opacity: 0;
3037 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
3038 | transform: scale(.1) translate3d(2000px, 0, 0);
3039 | -webkit-transform-origin: right center;
3040 | transform-origin: right center;
3041 | }
3042 | }
3043 |
3044 | .zoomOutRight {
3045 | -webkit-animation-name: zoomOutRight;
3046 | animation-name: zoomOutRight;
3047 | }
3048 |
3049 | @-webkit-keyframes zoomOutUp {
3050 | 40% {
3051 | opacity: 1;
3052 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3053 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3054 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3055 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3056 | }
3057 |
3058 | to {
3059 | opacity: 0;
3060 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3061 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3062 | -webkit-transform-origin: center bottom;
3063 | transform-origin: center bottom;
3064 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3065 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3066 | }
3067 | }
3068 |
3069 | @keyframes zoomOutUp {
3070 | 40% {
3071 | opacity: 1;
3072 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3073 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3074 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3075 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3076 | }
3077 |
3078 | to {
3079 | opacity: 0;
3080 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3081 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3082 | -webkit-transform-origin: center bottom;
3083 | transform-origin: center bottom;
3084 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3085 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3086 | }
3087 | }
3088 |
3089 | .zoomOutUp {
3090 | -webkit-animation-name: zoomOutUp;
3091 | animation-name: zoomOutUp;
3092 | }
3093 |
3094 | @-webkit-keyframes slideInDown {
3095 | from {
3096 | -webkit-transform: translate3d(0, -100%, 0);
3097 | transform: translate3d(0, -100%, 0);
3098 | visibility: visible;
3099 | }
3100 |
3101 | to {
3102 | -webkit-transform: translate3d(0, 0, 0);
3103 | transform: translate3d(0, 0, 0);
3104 | }
3105 | }
3106 |
3107 | @keyframes slideInDown {
3108 | from {
3109 | -webkit-transform: translate3d(0, -100%, 0);
3110 | transform: translate3d(0, -100%, 0);
3111 | visibility: visible;
3112 | }
3113 |
3114 | to {
3115 | -webkit-transform: translate3d(0, 0, 0);
3116 | transform: translate3d(0, 0, 0);
3117 | }
3118 | }
3119 |
3120 | .slideInDown {
3121 | -webkit-animation-name: slideInDown;
3122 | animation-name: slideInDown;
3123 | }
3124 |
3125 | @-webkit-keyframes slideInLeft {
3126 | from {
3127 | -webkit-transform: translate3d(-100%, 0, 0);
3128 | transform: translate3d(-100%, 0, 0);
3129 | visibility: visible;
3130 | }
3131 |
3132 | to {
3133 | -webkit-transform: translate3d(0, 0, 0);
3134 | transform: translate3d(0, 0, 0);
3135 | }
3136 | }
3137 |
3138 | @keyframes slideInLeft {
3139 | from {
3140 | -webkit-transform: translate3d(-100%, 0, 0);
3141 | transform: translate3d(-100%, 0, 0);
3142 | visibility: visible;
3143 | }
3144 |
3145 | to {
3146 | -webkit-transform: translate3d(0, 0, 0);
3147 | transform: translate3d(0, 0, 0);
3148 | }
3149 | }
3150 |
3151 | .slideInLeft {
3152 | -webkit-animation-name: slideInLeft;
3153 | animation-name: slideInLeft;
3154 | }
3155 |
3156 | @-webkit-keyframes slideInRight {
3157 | from {
3158 | -webkit-transform: translate3d(100%, 0, 0);
3159 | transform: translate3d(100%, 0, 0);
3160 | visibility: visible;
3161 | }
3162 |
3163 | to {
3164 | -webkit-transform: translate3d(0, 0, 0);
3165 | transform: translate3d(0, 0, 0);
3166 | }
3167 | }
3168 |
3169 | @keyframes slideInRight {
3170 | from {
3171 | -webkit-transform: translate3d(100%, 0, 0);
3172 | transform: translate3d(100%, 0, 0);
3173 | visibility: visible;
3174 | }
3175 |
3176 | to {
3177 | -webkit-transform: translate3d(0, 0, 0);
3178 | transform: translate3d(0, 0, 0);
3179 | }
3180 | }
3181 |
3182 | .slideInRight {
3183 | -webkit-animation-name: slideInRight;
3184 | animation-name: slideInRight;
3185 | }
3186 |
3187 | @-webkit-keyframes slideInUp {
3188 | from {
3189 | -webkit-transform: translate3d(0, 100%, 0);
3190 | transform: translate3d(0, 100%, 0);
3191 | visibility: visible;
3192 | }
3193 |
3194 | to {
3195 | -webkit-transform: translate3d(0, 0, 0);
3196 | transform: translate3d(0, 0, 0);
3197 | }
3198 | }
3199 |
3200 | @keyframes slideInUp {
3201 | from {
3202 | -webkit-transform: translate3d(0, 100%, 0);
3203 | transform: translate3d(0, 100%, 0);
3204 | visibility: visible;
3205 | }
3206 |
3207 | to {
3208 | -webkit-transform: translate3d(0, 0, 0);
3209 | transform: translate3d(0, 0, 0);
3210 | }
3211 | }
3212 |
3213 | .slideInUp {
3214 | -webkit-animation-name: slideInUp;
3215 | animation-name: slideInUp;
3216 | }
3217 |
3218 | @-webkit-keyframes slideOutDown {
3219 | from {
3220 | -webkit-transform: translate3d(0, 0, 0);
3221 | transform: translate3d(0, 0, 0);
3222 | }
3223 |
3224 | to {
3225 | visibility: hidden;
3226 | -webkit-transform: translate3d(0, 100%, 0);
3227 | transform: translate3d(0, 100%, 0);
3228 | }
3229 | }
3230 |
3231 | @keyframes slideOutDown {
3232 | from {
3233 | -webkit-transform: translate3d(0, 0, 0);
3234 | transform: translate3d(0, 0, 0);
3235 | }
3236 |
3237 | to {
3238 | visibility: hidden;
3239 | -webkit-transform: translate3d(0, 100%, 0);
3240 | transform: translate3d(0, 100%, 0);
3241 | }
3242 | }
3243 |
3244 | .slideOutDown {
3245 | -webkit-animation-name: slideOutDown;
3246 | animation-name: slideOutDown;
3247 | }
3248 |
3249 | @-webkit-keyframes slideOutLeft {
3250 | from {
3251 | -webkit-transform: translate3d(0, 0, 0);
3252 | transform: translate3d(0, 0, 0);
3253 | }
3254 |
3255 | to {
3256 | visibility: hidden;
3257 | -webkit-transform: translate3d(-100%, 0, 0);
3258 | transform: translate3d(-100%, 0, 0);
3259 | }
3260 | }
3261 |
3262 | @keyframes slideOutLeft {
3263 | from {
3264 | -webkit-transform: translate3d(0, 0, 0);
3265 | transform: translate3d(0, 0, 0);
3266 | }
3267 |
3268 | to {
3269 | visibility: hidden;
3270 | -webkit-transform: translate3d(-100%, 0, 0);
3271 | transform: translate3d(-100%, 0, 0);
3272 | }
3273 | }
3274 |
3275 | .slideOutLeft {
3276 | -webkit-animation-name: slideOutLeft;
3277 | animation-name: slideOutLeft;
3278 | }
3279 |
3280 | @-webkit-keyframes slideOutRight {
3281 | from {
3282 | -webkit-transform: translate3d(0, 0, 0);
3283 | transform: translate3d(0, 0, 0);
3284 | }
3285 |
3286 | to {
3287 | visibility: hidden;
3288 | -webkit-transform: translate3d(100%, 0, 0);
3289 | transform: translate3d(100%, 0, 0);
3290 | }
3291 | }
3292 |
3293 | @keyframes slideOutRight {
3294 | from {
3295 | -webkit-transform: translate3d(0, 0, 0);
3296 | transform: translate3d(0, 0, 0);
3297 | }
3298 |
3299 | to {
3300 | visibility: hidden;
3301 | -webkit-transform: translate3d(100%, 0, 0);
3302 | transform: translate3d(100%, 0, 0);
3303 | }
3304 | }
3305 |
3306 | .slideOutRight {
3307 | -webkit-animation-name: slideOutRight;
3308 | animation-name: slideOutRight;
3309 | }
3310 |
3311 | @-webkit-keyframes slideOutUp {
3312 | from {
3313 | -webkit-transform: translate3d(0, 0, 0);
3314 | transform: translate3d(0, 0, 0);
3315 | }
3316 |
3317 | to {
3318 | visibility: hidden;
3319 | -webkit-transform: translate3d(0, -100%, 0);
3320 | transform: translate3d(0, -100%, 0);
3321 | }
3322 | }
3323 |
3324 | @keyframes slideOutUp {
3325 | from {
3326 | -webkit-transform: translate3d(0, 0, 0);
3327 | transform: translate3d(0, 0, 0);
3328 | }
3329 |
3330 | to {
3331 | visibility: hidden;
3332 | -webkit-transform: translate3d(0, -100%, 0);
3333 | transform: translate3d(0, -100%, 0);
3334 | }
3335 | }
3336 |
3337 | .slideOutUp {
3338 | -webkit-animation-name: slideOutUp;
3339 | animation-name: slideOutUp;
3340 | }
3341 |
--------------------------------------------------------------------------------
/example/assets/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bokuweb-sandbox/react-balloon/17bd7e7b12af6d281110f8be47815abd9d243f98/example/assets/title.png
--------------------------------------------------------------------------------
/example/dist/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bokuweb-sandbox/react-balloon/17bd7e7b12af6d281110f8be47815abd9d243f98/example/dist/.keep
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React-balloon example
6 |
7 |
8 |
9 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/example/src/example.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Balloon from '../../src';
3 |
4 | export default class Example extends Component {
5 | render() {
6 | const center = {
7 | width: document.body.clientWidth / 2,
8 | height: document.body.clientHeight / 2,
9 | };
10 | return (
11 | console.dir(position)}
22 | onBoxResize={size => console.log(size)}
23 | onBoxResizeStop={size => console.log(size)}
24 | disable={false}
25 | >
26 | Hello, World!!!
27 |
28 | );
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/example/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import Example from './example';
4 |
5 | render(, document.querySelector('#content'));
6 |
7 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function(config) {
2 | config.set({
3 | basePath: '',
4 | frameworks: ['mocha', 'browserify'],
5 | files: [
6 | './node_modules/babel-polyfill/dist/polyfill.js',
7 | 'test/*.js'
8 | ],
9 | exclude: [
10 | ],
11 |
12 | babelPreprocessor: {
13 | options: {
14 | presets: ['airbnb']
15 | }
16 | },
17 | browserify: {
18 | debug: true,
19 | extensions: ['.js'],
20 | transform: [
21 | [require('babelify').configure({
22 | plugins: ['babel-plugin-espower']
23 | }), { presets: ['airbnb'] }]
24 | ],
25 | configure: function(bundle) {
26 | bundle.on('prebundle', function() {
27 | bundle.external('react/lib/ReactContext');
28 | bundle.external('react/lib/ExecutionEnvironment');
29 | });
30 | }
31 | },
32 |
33 | preprocessors: {
34 | 'test/*.js': ['babel', 'browserify']
35 | },
36 |
37 | reporters: ['progress'],
38 |
39 | port: 9876,
40 |
41 | colors: true,
42 |
43 | logLevel: config.LOG_INFO,
44 |
45 | autoWatch: false,
46 |
47 | browsers: ['PhantomJS'],
48 |
49 | singleRun: true
50 | })
51 | }
52 |
--------------------------------------------------------------------------------
/lib/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bokuweb-sandbox/react-balloon/17bd7e7b12af6d281110f8be47815abd9d243f98/lib/.keep
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-balloon",
3 | "version": "0.2.5",
4 | "description": "",
5 | "main": "lib/index.js",
6 | "scripts": {
7 | "watch": "npm run watch:lib & npm run watch:example",
8 | "watch:lib": "watchify --extension=js -o lib/index.js src/index.js",
9 | "watch:example": "watchify --extension=js -o example/dist/bundle.js example/src/index.js",
10 | "build": "npm run build:lib & npm run build:example",
11 | "build:lib": "browserify --extension=js -o lib/index.js src/index.js",
12 | "build:example": "browserify --extension=js -o example/dist/bundle.js example/src/index.js",
13 | "test": "karma start",
14 | "test:watch": "karma start --auto-watch --no-single-run",
15 | "compile": "babel -d lib/ src/",
16 | "prepublish": "npm run compile",
17 | "lint": "eslint src"
18 | },
19 | "repository": {
20 | "type": "git",
21 | "url": "git+https://github.com/bokuweb/react-balloon.git"
22 | },
23 | "author": "bokuweb",
24 | "license": "MIT",
25 | "bugs": {
26 | "url": "https://github.com/bokuweb/react-balloon/issues"
27 | },
28 | "homepage": "https://github.com/bokuweb/react-balloon#readme",
29 | "devDependencies": {
30 | "babel": "^6.3.26",
31 | "babel-cli": "^6.4.5",
32 | "babel-eslint": "^4.1.8",
33 | "babel-plugin-add-module-exports": "^0.2.1",
34 | "babel-plugin-espower": "^2.0.0",
35 | "babel-plugin-transform-object-assign": "^6.8.0",
36 | "babel-polyfill": "^6.5.0",
37 | "babel-preset-airbnb": "^1.1.1",
38 | "babel-preset-es2015": "^6.3.13",
39 | "babel-preset-react": "^6.3.13",
40 | "babel-preset-stage-0": "^6.3.13",
41 | "babelify": "^7.2.0",
42 | "browserify": "^13.0.0",
43 | "enzyme": "^2.0.0",
44 | "eslint": "^1.10.3",
45 | "eslint-config-airbnb": "^5.0.0",
46 | "eslint-plugin-react": "^3.16.1",
47 | "espower-babel": "^3.3.0",
48 | "expect": "^1.14.0",
49 | "expect-jsx": "^2.3.0",
50 | "karma": "^0.13.19",
51 | "karma-babel-preprocessor": "^6.0.1",
52 | "karma-browserify": "^4.4.0",
53 | "karma-cli": "^0.1.1",
54 | "karma-mocha": "^0.2.0",
55 | "karma-phantomjs-launcher": "^0.2.1",
56 | "mocha": "^2.3.3",
57 | "phantomjs": "^1.9.18",
58 | "phantomjs-polyfill": "^0.0.1",
59 | "power-assert": "^1.1.0",
60 | "react": "^0.14.7",
61 | "react-addons-test-utils": "^15.0.1",
62 | "react-dom": "^0.14.7",
63 | "sinon": "^1.17.2",
64 | "watchify": "^3.7.0"
65 | },
66 | "peerDependencies": {
67 | "react": ">=0.14.7"
68 | },
69 | "browserify": {
70 | "transform": [
71 | "babelify"
72 | ]
73 | },
74 | "files": [
75 | "lib"
76 | ],
77 | "dependencies": {
78 | "react-resizable-and-movable": "^1.1.1"
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/screenshot.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bokuweb-sandbox/react-balloon/17bd7e7b12af6d281110f8be47815abd9d243f98/screenshot.gif
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import Resizable from 'react-resizable-and-movable';
3 |
4 | export default class Balloon extends Component {
5 | static propTypes = {
6 | box: PropTypes.object,
7 | pointer: PropTypes.object,
8 | backgroundColor: PropTypes.string,
9 | zIndex: PropTypes.number,
10 | minWidth: PropTypes.number,
11 | minHeight: PropTypes.number,
12 | maxWidth: PropTypes.number,
13 | maxHeight: PropTypes.number,
14 | marker: PropTypes.object,
15 | className: PropTypes.string,
16 | children: PropTypes.any,
17 | style: PropTypes.object,
18 | onBoxDragStart: PropTypes.func,
19 | onBoxDrag: PropTypes.func,
20 | onBoxDragStop: PropTypes.func,
21 | onBoxResizeStart: PropTypes.func,
22 | onBoxResize: PropTypes.func,
23 | onBoxResizeStop: PropTypes.func,
24 | onPointerDragStart: PropTypes.func,
25 | onPointerDrag: PropTypes.func,
26 | onPointerDragStop: PropTypes.func,
27 | disable: PropTypes.bool,
28 | onClick: PropTypes.func,
29 | strokeColor: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | box: {
34 | x: 0,
35 | y: 0,
36 | width: 100,
37 | height: 100,
38 | },
39 | pointer: {
40 | x: 0,
41 | y: 0,
42 | },
43 | marker: ,
44 | backgroundColor: '#f5f5f5',
45 | strokeColor: '#f5f5f5',
46 | zIndex: 100,
47 | className: '',
48 | style: {},
49 | onBoxDragStart: () => null,
50 | onBoxDrag: () => null,
51 | onBoxDragStop: () => null,
52 | onBoxResizeStart: () => null,
53 | onBoxResize: () => null,
54 | onBoxResizeStop: () => null,
55 | onPointerDragStart: () => null,
56 | onPointerDrag: () => null,
57 | onPointerDragStop: () => null,
58 | disable: false,
59 | onClick: () => null,
60 | };
61 |
62 | constructor(props) {
63 | super(props);
64 | const { box, pointer } = this.props;
65 | const pointerState = this.getPointer(box, pointer);
66 | this.state = {
67 | pointer: pointerState,
68 | box: {
69 | x: box.x,
70 | y: box.y,
71 | width: box.width,
72 | height: box.height,
73 | },
74 | maxHeight: this.props.maxHeight,
75 | maxWidth: this.props.maxWidth,
76 | };
77 | }
78 |
79 | componentWillReceiveProps(nextProps) {
80 | const { box, pointer } = nextProps;
81 | const pointerState = this.getPointer(box, pointer);
82 | this.state = {
83 | pointer: pointerState,
84 | box: {
85 | x: box.x,
86 | y: box.y,
87 | width: box.width,
88 | height: box.height,
89 | },
90 | maxHeight: this.props.maxHeight,
91 | maxWidth: this.props.maxWidth,
92 | };
93 | }
94 |
95 | onBoxResize(_, { width, height }) {
96 | const { box: { x, y }, pointer: { destination } } = this.state;
97 | const toBottomBoundary = this.refs.wrapper.clientHeight - y;
98 | const toRightBoundary = this.refs.wrapper.clientWidth - x;
99 | const maxHeight = (toBottomBoundary < this.props.maxHeight || !this.props.maxHeight)
100 | ? toBottomBoundary
101 | : this.props.maxHeight;
102 | const maxWidth = (toRightBoundary < this.props.maxWidth || !this.props.maxWidth)
103 | ? toRightBoundary
104 | : this.props.maxWidth;
105 | const box = { x, y, width, height };
106 | const pointerState = this.getPointer(box, destination);
107 | this.setState({
108 | pointer: pointerState,
109 | box,
110 | maxHeight,
111 | maxWidth,
112 | });
113 | this.props.onBoxResize({ width, height });
114 | }
115 |
116 | onBoxDrag(e, { position }) {
117 | const { box: { width, height }, pointer: { destination } } = this.state;
118 | const x = position.left;
119 | const y = position.top;
120 | const box = { x, y, width, height };
121 | const pointerState = this.getPointer(box, destination);
122 | this.setState({
123 | pointer: pointerState,
124 | box,
125 | });
126 | this.props.onBoxDrag(position);
127 | }
128 |
129 | onBoxDragStop(e, { position }) {
130 | this.props.onBoxDragStop(position);
131 | }
132 |
133 | onPointerDrag(e, { position }) {
134 | const { box } = this.state;
135 | const destination = { x: position.left + 15, y: position.top + 15 };
136 | const pointerState = this.getPointer(box, destination);
137 | this.setState({ pointer: pointerState });
138 | this.props.onPointerDrag(position);
139 | }
140 |
141 | onPointerDragStop(e, { position }) {
142 | this.props.onPointerDragStop(position);
143 | }
144 |
145 | getBoxCenter(box) {
146 | return {
147 | x: box.x + box.width / 2,
148 | y: box.y + box.height / 2,
149 | };
150 | }
151 |
152 | getPointerType(origin, destination) {
153 | const degree = this.getDegree(origin, destination);
154 | if (degree >= -45 && degree < 45) return 'right';
155 | if (degree >= 45 && degree < 135) return 'top';
156 | if ((degree >= 135 && degree <= 180) || (degree >= -180 && degree < -135)) return 'left';
157 | return 'bottom';
158 | }
159 |
160 | getDegree(origin, destination) {
161 | const x = destination.x - origin.x;
162 | const y = origin.y - destination.y;
163 | const rad = Math.atan2(y, x);
164 | if (isNaN(rad)) return 0;
165 | return rad * 360 / (2 * Math.PI);
166 | }
167 |
168 | getPointer(box, destination) {
169 | const boxCenter = this.getBoxCenter(box);
170 | const type = this.getPointerType(boxCenter, destination);
171 | return this.calculatePointer(destination, box, type);
172 | }
173 |
174 | calculatePointer(destination, box, type) {
175 | let base;
176 | let control;
177 | const { x, y, width, height } = box;
178 |
179 | switch (type) {
180 | case 'top' :
181 | base = [
182 | { x: x + width * 0.25, y: y + 1 },
183 | { x: x + width * 0.75, y: y + 1 },
184 | ];
185 | control = { x: x + width * 0.5, y };
186 | break;
187 | case 'right' :
188 | base = [
189 | { x: x + width - 1, y: y + height * 0.25 },
190 | { x: x + width - 1, y: y + height * 0.75 },
191 | ];
192 | control = { x: x + width, y: y + height * 0.5 };
193 | break;
194 | case 'bottom' :
195 | base = [
196 | { x: x + width * 0.25, y: y + height - 1 },
197 | { x: x + width * 0.75, y: y + height - 1 },
198 | ];
199 | control = { x: x + width * 0.5, y: y + height };
200 | break;
201 | case 'left' :
202 | base = [
203 | { x, y: y + height * 0.25 },
204 | { x, y: y + height * 0.75 },
205 | ];
206 | control = { x, y: y + height * 0.5 };
207 | break;
208 | default:
209 | base = [
210 | { x: x + width, y: y + height * 0.25 },
211 | { x: x + width, y: y + height * 0.75 },
212 | ];
213 | control = { x: x + width, y: y + height * 0.5 };
214 | break;
215 | }
216 |
217 | return {
218 | base,
219 | control,
220 | destination,
221 | };
222 | }
223 |
224 | render() {
225 | const { box, pointer, backgroundColor, zIndex, minWidth, minHeight,
226 | marker, className, children, style, onPointerDragStart,
227 | onBoxDragStart, onBoxResizeStart, onBoxResizeStop, disable, strokeColor } = this.props;
228 | const { base, destination, control } = this.state.pointer;
229 | const { maxHeight, maxWidth } = this.state;
230 | const cursor = disable ? { cursor: 'default' } : {};
231 | return (
232 |
243 |
291 |
292 | { children }
293 |
294 |
295 |
318 | { marker }
319 |
320 |
330 |
331 | );
332 | }
333 | }
334 |
335 |
--------------------------------------------------------------------------------
/test/index.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount } from 'enzyme';
3 | import assert from 'power-assert';
4 | import sinon from 'sinon';
5 | import ResizableAndMovable from 'react-resizable-and-movable';
6 | import Balloon from '../src/index';
7 |
8 | const mouseMove = (node, x, y) => {
9 | const event = document.createEvent('MouseEvents');
10 | event.initMouseEvent('mousemove', true, true, window,
11 | 0, 0, 0, x, y, false, false, false, false, 0, null);
12 | document.dispatchEvent(event);
13 | return event;
14 | };
15 |
16 | describe('', () => {
17 | it('should have default properties', () => {
18 | const balloon = mount();
19 | assert.equal(balloon.props().zIndex, 100);
20 | assert.equal(balloon.props().className, '');
21 | assert.equal(balloon.props().backgroundColor, '#f5f5f5');
22 | assert.equal(balloon.props().minWidth, undefined);
23 | assert.equal(balloon.props().minHeight, undefined);
24 | assert.equal(balloon.props().maxWidth, undefined);
25 | assert.equal(balloon.props().maxHeight, undefined);
26 | assert.deepEqual(balloon.props().style, {});
27 | assert.deepEqual(balloon.props().start, {
28 | box: {
29 | x: 0,
30 | y: 0,
31 | width: 100,
32 | height: 100,
33 | },
34 | destination: {
35 | x: 0,
36 | y: 0,
37 | },
38 | });
39 | });
40 |
41 | it('Should root element have expected element and styles', () => {
42 | const balloon = shallow();
43 | const expectedStyles = { width: '100%', height: '100%', zIndex: 100 };
44 | assert.equal(balloon.type(), 'div');
45 | assert.deepEqual(balloon.prop('style'), expectedStyles);
46 | });
47 |
48 | it('Should 1st element have expected type', () => {
49 | const balloon = shallow();
50 | const first = balloon.children().at(0);
51 | assert.equal(first.text(), '');
52 | });
53 |
54 | it('Should 1st element have expected element without children', () => {
55 | const balloon = shallow();
56 | const child = balloon.children().at(0).children();
57 | assert.equal(child.type(), 'div');
58 | assert.equal(child.props().children, undefined);
59 | });
60 |
61 | it('Should 1st element have expected element with children', () => {
62 | const balloon = shallow(Test Text);
63 | const child = balloon.children().at(0).children();
64 | assert.equal(child.type(), 'div');
65 | assert(child.children().contains('Test Text'));
66 | });
67 |
68 | it('Should chilrdren wrapper have expected styles', () => {
69 | const balloon = shallow(Test Text);
70 | const child = balloon.children().at(0).children();
71 | const expectedStyles = {
72 | padding: '1px',
73 | width: '100%',
74 | height: '100%',
75 | };
76 | assert.deepEqual(child.prop('style'), expectedStyles);
77 | });
78 |
79 | it('Should 2nd element have expected type', () => {
80 | const balloon = shallow();
81 | const second = balloon.children().at(1);
82 | assert.equal(second.text(), '');
83 | });
84 |
85 | it('Should 2nd element have expected props', () => {
86 | const balloon = shallow();
87 | const second = balloon.children().at(1);
88 | assert.deepEqual(second.props().start, {x: -15, y: -15});
89 | assert.deepEqual(second.props().isResizable, { x: false, y: false, xy: false });
90 | assert.equal(second.props().bounds, 'parent');
91 | assert.equal(second.props().zIndex, 100);
92 | assert.equal(typeof second.props().onDrag, 'function');
93 | });
94 |
95 | it('Should 2nd element have marker component', () => {
96 | const balloon = shallow();
97 | const child = balloon.children().at(1).children();
98 | assert.equal(child.type(), 'div');
99 | assert.deepEqual(child.prop('style'), { width: '30px', height: '30px' });
100 | });
101 |
102 | it('Should 3rd element have expected type', () => {
103 | const balloon = shallow();
104 | const third = balloon.children().at(2);
105 | assert.equal(third.type(), 'svg');
106 | });
107 |
108 | it('Should 3rd element have one path element', () => {
109 | const balloon = shallow();
110 | const third = balloon.children().at(2);
111 | assert.equal(third.find('path').length, 1);
112 | });
113 |
114 | it('Should path on svg have expected props', () => {
115 | const balloon = shallow();
116 | const path = balloon.children().at(2).children();
117 | assert.equal(path.prop('strokeWidth'), 1);
118 | assert.equal(path.prop('stroke'), '#f5f5f5');
119 | assert.equal(path.prop('fill'), '#f5f5f5');
120 | assert.equal(path.prop('d').replace(/\s+/g, ''), 'M025Q05000Q050075');
121 | });
122 |
123 | it('should pass className properly to root ', () => {
124 | const balloon = shallow();
125 | assert.equal(balloon.prop('className'), 'foo');
126 | });
127 |
128 | it('should pass zIndex properly to root', () => {
129 | const balloon = shallow();
130 | assert.deepEqual(balloon.prop('style'), { width: '100%', height: '100%', zIndex: 999 });
131 | });
132 |
133 | it('should pass props properly to first resizable box', () => {
134 | const balloon = shallow(
135 |
145 | );
146 | const first = balloon.children().at(0);
147 | assert.equal(first.prop('zIndex'), 999);
148 | assert.equal(first.prop('maxHeight'), 200);
149 | assert.equal(first.prop('maxWidth'), 220);
150 | assert.equal(first.prop('minHeight'), 240);
151 | assert.equal(first.prop('minWidth'), 260);
152 | assert.deepEqual(first.prop('customStyle'), { color: 'black', backgroundColor: '#000000' });
153 | assert.deepEqual(first.prop('start'), { x: 100, y: 120, width: 140, height: 160 });
154 | });
155 |
156 |
157 | it('should pass props properly to second resizable box', () => {
158 | const balloon = shallow(
159 | foo}
163 | />
164 | );
165 | const second = balloon.children().at(1);
166 | assert.equal(second.prop('zIndex'), 999);
167 | assert.deepEqual(second.prop('start'), { x: 85, y: 285 });
168 | const marker = second.children();
169 | assert.equal(marker.type(), 'span');
170 | assert(marker.contains('foo'));
171 | });
172 |
173 | it('should pass props properly to svg', () => {
174 | const balloon = shallow(
175 |
179 | );
180 | const svg = balloon.children().at(2);
181 | assert.equal(svg.prop('style').zIndex, 999);
182 | const path = svg.children();
183 | assert.equal(path.prop('stroke'), '#000000');
184 | assert.equal(path.prop('fill'), '#000000');
185 | });
186 |
187 | it('should onPointerDragxxx called, when maker dragged', () => {
188 | const spy = sinon.spy(Balloon.prototype, 'onPointerDrag');
189 | const onPointerDragStart = sinon.spy();
190 | const onPointerDragStop = sinon.spy();
191 | const onPointerDrag = sinon.spy();
192 | const balloon = mount(
193 | );
199 | const marker = balloon.children().at(1).children();
200 | marker.find('div').at(0).simulate('mousedown');
201 | // TODO: Not simulated properly
202 | mouseMove(marker.find('div').get(0), 100, 100);
203 | marker.find('div').at(0).simulate('mouseup');
204 | assert(Balloon.prototype.onPointerDrag.calledOnce);
205 | assert(onPointerDragStart.calledOnce);
206 | assert(onPointerDragStop.calledOnce);
207 | assert.deepEqual(onPointerDrag.getCall(0).args[0], {left: 85, top: 285});
208 | // FIXME: dragStop return NaN
209 | //assert.deepEqual(onPointerDragStop.getCall(0).args[0], {left: 85, top: 285});
210 | });
211 |
212 | it('should onBoxDragxxx called, when box dragged', () => {
213 | const spy = sinon.spy(Balloon.prototype, 'onBoxDrag');
214 | const onBoxDragStart = sinon.spy();
215 | const onBoxDragStop = sinon.spy();
216 | const onBoxDrag = sinon.spy();
217 | const balloon = mount(
218 | );
224 | const box = balloon.children().at(0).children();
225 | box.find('div').at(0).simulate('mousedown');
226 | // TODO: Not simulated properly
227 | mouseMove(box.find('div').get(0), 100, 100);
228 | box.find('div').at(0).simulate('mouseup');
229 | assert(Balloon.prototype.onBoxDrag.calledOnce);
230 | assert(onBoxDragStart.calledOnce);
231 | assert(onBoxDragStop.calledOnce);
232 | assert.deepEqual(onBoxDrag.getCall(0).args[0], { left: 100, top: 120 });
233 | });
234 |
235 | it('should onBoxResizexxx called, when box resized', () => {
236 | const spy = sinon.spy(Balloon.prototype, 'onBoxResize');
237 | const onBoxResizeStart = sinon.spy();
238 | const onBoxResizeStop = sinon.spy();
239 | const onBoxResize = sinon.spy();
240 | const balloon = mount(
241 |
247 | );
248 | const box = balloon.children().at(0).children();
249 | box.find('div').children().at(1).simulate('mousedown');
250 | mouseMove(box.find('div').children().at(1), 10, 10);
251 | box.find('div').children().at(1).simulate('mouseup');
252 | assert(Balloon.prototype.onBoxResize.calledOnce);
253 | assert(onBoxResizeStart.calledOnce);
254 | // FIXME: onBoxResizeStop not called
255 | //assert(onBoxResizeStop.calledOnce);
256 | });
257 | });
258 |
259 |
260 |
--------------------------------------------------------------------------------