PluginProbe ʕ •ᴥ•ʔ
Spider Elements – Premium Elementor Widgets & Addons Library / 1.1.0
Spider Elements – Premium Elementor Widgets & Addons Library v1.1.0
trunk 1.0.0 1.1.0 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.7 1.7.0 1.8.0 1.9.0
spider-elements / assets / scss / _Animation.scss
spider-elements / assets / scss Last commit date
admin 2 years ago _Accordion.scss 2 years ago _Alerts_box.scss 2 years ago _Animated_Headline.scss 2 years ago _Animation.scss 2 years ago _Before_after.scss 2 years ago _Buttons.scss 2 years ago _Cheat_sheet.scss 2 years ago _Common.scss 2 years ago _Counter.scss 2 years ago _Fullscreen_Slider.scss 2 years ago _Icon_box.scss 2 years ago _Instagram.scss 2 years ago _Integration.scss 2 years ago _List_item.scss 2 years ago _Mixins.scss 2 years ago _Pricing_Table.scss 2 years ago _Pricing_Table_Switcher.scss 2 years ago _Skill_Showcase.scss 2 years ago _Tabs.scss 2 years ago _Testimonial.scss 2 years ago _Timeline.scss 2 years ago _Variables.scss 2 years ago _Video.scss 2 years ago _Video_popup.scss 2 years ago _blog_grid.scss 2 years ago _framework.scss 2 years ago _prefix.scss 2 years ago _team.scss 2 years ago admin.css 2 years ago admin.css.map 2 years ago admin.scss 2 years ago main.css 2 years ago main.css.map 2 years ago main.scss 2 years ago
_Animation.scss
672 lines
1 @-webkit-keyframes fadeIn {
2 0% {
3 opacity: 0
4 }
5 100% {
6 opacity: 1
7 }
8 }
9 @keyframes fadeIn {
10 0% {
11 opacity: 0
12 }
13 100% {
14 opacity: 1
15 }
16 }
17 .fadeIn {
18 animation-name: fadeIn
19 }
20 @-webkit-keyframes fadeInDown {
21 0% {
22 opacity: 0;
23 -webkit-transform: translateY(-20px);
24 transform: translateY(-20px)
25 }
26 100% {
27 opacity: 1;
28 -webkit-transform: translateY(0);
29 transform: translateY(0)
30 }
31 }
32 @keyframes fadeInDown {
33 0% {
34 opacity: 0;
35 -webkit-transform: translateY(-20px);
36 -ms-transform: translateY(-20px);
37 transform: translateY(-20px)
38 }
39 100% {
40 opacity: 1;
41 -webkit-transform: translateY(0);
42 -ms-transform: translateY(0);
43 transform: translateY(0)
44 }
45 }
46 .fadeInDown {
47 -webkit-animation-name: fadeInDown;
48 animation-name: fadeInDown
49 }
50
51 @-webkit-keyframes height {
52 0% {
53 opacity: 0;
54 height: 0;
55 }
56 100% {
57 opacity: 0.1;
58 height: 50%;
59 }
60 }
61 @keyframes height {
62 0% {
63 opacity: 0;
64 height: 0;
65 transition: all 0.6s linear;
66 }
67 100% {
68 opacity: 0.3;
69 height: 50%;
70 }
71 }
72 .height {
73 -webkit-animation-name: height;
74 animation-name: height;
75 }
76
77 @-webkit-keyframes fadeInDown2 {
78 0% {
79 -webkit-transform: translateY(-40px);
80 -ms-transform: translateY(-40px);
81 transform: translateY(-40px);
82 opacity: 0;
83 }
84 100% {
85 -webkit-transform: translateY(0);
86 transform: translateY(0);
87 opacity: 0.2;
88 }
89 }
90 @keyframes fadeInDown2 {
91 0% {
92 -webkit-transform: translateY(-40px);
93 -ms-transform: translateY(-40px);
94 transform: translateY(-40px);
95 opacity: 0;
96 }
97 100% {
98 -webkit-transform: translateY(0);
99 -ms-transform: translateY(0);
100 transform: translateY(0);
101 opacity: 0.2;
102 }
103 }
104 .fadeInDown2 {
105 -webkit-animation-name: fadeInDown2;
106 animation-name: fadeInDown2
107 }
108
109 @-webkit-keyframes fadeInDownBig {
110 0% {
111 opacity: 0;
112 -webkit-transform: translateY(-2000px);
113 transform: translateY(-2000px)
114 }
115 100% {
116 opacity: 1;
117 -webkit-transform: translateY(0);
118 transform: translateY(0)
119 }
120 }
121 @keyframes fadeInDownBig {
122 0% {
123 opacity: 0;
124 -webkit-transform: translateY(-2000px);
125 -ms-transform: translateY(-2000px);
126 transform: translateY(-2000px)
127 }
128 100% {
129 opacity: 1;
130 -webkit-transform: translateY(0);
131 -ms-transform: translateY(0);
132 transform: translateY(0)
133 }
134 }
135 .fadeInDownBig {
136 -webkit-animation-name: fadeInDownBig;
137 animation-name: fadeInDownBig
138 }
139 @-webkit-keyframes fadeInLeft {
140 0% {
141 opacity: 0;
142 -webkit-transform: translateX(-20px);
143 transform: translateX(-20px)
144 }
145 100% {
146 opacity: 1;
147 -webkit-transform: translateX(0);
148 transform: translateX(0)
149 }
150 }
151 @keyframes fadeInLeft {
152 0% {
153 opacity: 0;
154 -webkit-transform: translateX(-20px);
155 -ms-transform: translateX(-20px);
156 transform: translateX(-20px)
157 }
158 100% {
159 opacity: 1;
160 -webkit-transform: translateX(0);
161 -ms-transform: translateX(0);
162 transform: translateX(0)
163 }
164 }
165 .fadeInLeft {
166 -webkit-animation-name: fadeInLeft;
167 animation-name: fadeInLeft
168 }
169 @-webkit-keyframes fadeInLeftBig {
170 0% {
171 opacity: 0;
172 -webkit-transform: translateX(-2000px);
173 transform: translateX(-2000px)
174 }
175 100% {
176 opacity: 1;
177 -webkit-transform: translateX(0);
178 transform: translateX(0)
179 }
180 }
181 @keyframes fadeInLeftBig {
182 0% {
183 opacity: 0;
184 -webkit-transform: translateX(-2000px);
185 -ms-transform: translateX(-2000px);
186 transform: translateX(-2000px)
187 }
188 100% {
189 opacity: 1;
190 -webkit-transform: translateX(0);
191 -ms-transform: translateX(0);
192 transform: translateX(0)
193 }
194 }
195 .fadeInLeftBig {
196 -webkit-animation-name: fadeInLeftBig;
197 animation-name: fadeInLeftBig
198 }
199 @-webkit-keyframes fadeInRight {
200 0% {
201 opacity: 0;
202 -webkit-transform: translateX(20px);
203 transform: translateX(20px)
204 }
205 100% {
206 opacity: 1;
207 -webkit-transform: translateX(0);
208 transform: translateX(0)
209 }
210 }
211 @keyframes fadeInRight {
212 0% {
213 opacity: 0;
214 -webkit-transform: translateX(20px);
215 -ms-transform: translateX(20px);
216 transform: translateX(20px)
217 }
218 100% {
219 opacity: 1;
220 -webkit-transform: translateX(0);
221 -ms-transform: translateX(0);
222 transform: translateX(0)
223 }
224 }
225 .fadeInRight {
226 -webkit-animation-name: fadeInRight;
227 animation-name: fadeInRight
228 }
229 @-webkit-keyframes fadeInRightBig {
230 0% {
231 opacity: 0;
232 -webkit-transform: translateX(2000px);
233 transform: translateX(2000px)
234 }
235 100% {
236 opacity: 1;
237 -webkit-transform: translateX(0);
238 transform: translateX(0)
239 }
240 }
241 @keyframes fadeInRightBig {
242 0% {
243 opacity: 0;
244 -webkit-transform: translateX(2000px);
245 -ms-transform: translateX(2000px);
246 transform: translateX(2000px)
247 }
248 100% {
249 opacity: 1;
250 -webkit-transform: translateX(0);
251 -ms-transform: translateX(0);
252 transform: translateX(0)
253 }
254 }
255 .fadeInRightBig {
256 -webkit-animation-name: fadeInRightBig;
257 animation-name: fadeInRightBig
258 }
259 @-webkit-keyframes fadeInUp {
260 0% {
261 opacity: 0;
262 -webkit-transform: translateY(20px);
263 transform: translateY(20px)
264 }
265 100% {
266 opacity: 1;
267 -webkit-transform: translateY(0);
268 transform: translateY(0)
269 }
270 }
271 @keyframes fadeInUp {
272 0% {
273 opacity: 0;
274 -webkit-transform: translateY(20px);
275 -ms-transform: translateY(20px);
276 transform: translateY(20px)
277 }
278 100% {
279 opacity: 1;
280 -webkit-transform: translateY(0);
281 -ms-transform: translateY(0);
282 transform: translateY(0)
283 }
284 }
285 .fadeInUp {
286 -webkit-animation-name: fadeInUp;
287 animation-name: fadeInUp;
288 }
289
290 @-webkit-keyframes fadeInUp2 {
291 0% {
292 opacity: 0;
293 -webkit-transform: translateY(20px);
294 transform: translateY(20px)
295 }
296 100% {
297 opacity: 0.2;
298 -webkit-transform: translateY(0);
299 transform: translateY(0)
300 }
301 }
302 @keyframes fadeInUp2 {
303 0% {
304 opacity: 0;
305 -webkit-transform: translateY(20px);
306 -ms-transform: translateY(20px);
307 transform: translateY(20px)
308 }
309 100% {
310 opacity: 0.2;
311 -webkit-transform: translateY(0);
312 -ms-transform: translateY(0);
313 transform: translateY(0)
314 }
315 }
316 .fadeInUp2 {
317 -webkit-animation-name: fadeInUp2;
318 animation-name: fadeInUp2
319 }
320 @-webkit-keyframes fadeInUpBig {
321 0% {
322 opacity: 0;
323 -webkit-transform: translateY(2000px);
324 transform: translateY(2000px)
325 }
326 100% {
327 opacity: 1;
328 -webkit-transform: translateY(0);
329 transform: translateY(0)
330 }
331 }
332 @keyframes fadeInUpBig {
333 0% {
334 opacity: 0;
335 -webkit-transform: translateY(2000px);
336 -ms-transform: translateY(2000px);
337 transform: translateY(2000px)
338 }
339 100% {
340 opacity: 1;
341 -webkit-transform: translateY(0);
342 -ms-transform: translateY(0);
343 transform: translateY(0)
344 }
345 }
346 .fadeInUpBig {
347 -webkit-animation-name: fadeInUpBig;
348 animation-name: fadeInUpBig
349 }
350 @-webkit-keyframes fadeOut {
351 0% {
352 opacity: 1
353 }
354 100% {
355 opacity: 0
356 }
357 }
358 @keyframes fadeOut {
359 0% {
360 opacity: 1
361 }
362 100% {
363 opacity: 0
364 }
365 }
366 .fadeOut {
367 -webkit-animation-name: fadeOut;
368 animation-name: fadeOut
369 }
370 @-webkit-keyframes fadeOutDown {
371 0% {
372 opacity: 1;
373 -webkit-transform: translateY(0);
374 transform: translateY(0)
375 }
376 100% {
377 opacity: 0;
378 -webkit-transform: translateY(20px);
379 transform: translateY(20px)
380 }
381 }
382 @keyframes fadeOutDown {
383 0% {
384 opacity: 1;
385 -webkit-transform: translateY(0);
386 -ms-transform: translateY(0);
387 transform: translateY(0)
388 }
389 100% {
390 opacity: 0;
391 -webkit-transform: translateY(20px);
392 -ms-transform: translateY(20px);
393 transform: translateY(20px)
394 }
395 }
396 .fadeOutDown {
397 -webkit-animation-name: fadeOutDown;
398 animation-name: fadeOutDown
399 }
400 @-webkit-keyframes fadeOutDownBig {
401 0% {
402 opacity: 1;
403 -webkit-transform: translateY(0);
404 transform: translateY(0)
405 }
406 100% {
407 opacity: 0;
408 -webkit-transform: translateY(2000px);
409 transform: translateY(2000px)
410 }
411 }
412 @keyframes fadeOutDownBig {
413 0% {
414 opacity: 1;
415 -webkit-transform: translateY(0);
416 -ms-transform: translateY(0);
417 transform: translateY(0)
418 }
419 100% {
420 opacity: 0;
421 -webkit-transform: translateY(2000px);
422 -ms-transform: translateY(2000px);
423 transform: translateY(2000px)
424 }
425 }
426 .fadeOutDownBig {
427 -webkit-animation-name: fadeOutDownBig;
428 animation-name: fadeOutDownBig
429 }
430 @-webkit-keyframes fadeOutLeft {
431 0% {
432 opacity: 1;
433 -webkit-transform: translateX(0);
434 transform: translateX(0)
435 }
436 100% {
437 opacity: 0;
438 -webkit-transform: translateX(-20px);
439 transform: translateX(-20px)
440 }
441 }
442 @keyframes fadeOutLeft {
443 0% {
444 opacity: 1;
445 -webkit-transform: translateX(0);
446 -ms-transform: translateX(0);
447 transform: translateX(0)
448 }
449 100% {
450 opacity: 0;
451 -webkit-transform: translateX(-20px);
452 -ms-transform: translateX(-20px);
453 transform: translateX(-20px)
454 }
455 }
456 .fadeOutLeft {
457 -webkit-animation-name: fadeOutLeft;
458 animation-name: fadeOutLeft
459 }
460 @-webkit-keyframes fadeOutLeftBig {
461 0% {
462 opacity: 1;
463 -webkit-transform: translateX(0);
464 transform: translateX(0)
465 }
466 100% {
467 opacity: 0;
468 -webkit-transform: translateX(-2000px);
469 transform: translateX(-2000px)
470 }
471 }
472 @keyframes fadeOutLeftBig {
473 0% {
474 opacity: 1;
475 -webkit-transform: translateX(0);
476 -ms-transform: translateX(0);
477 transform: translateX(0)
478 }
479 100% {
480 opacity: 0;
481 -webkit-transform: translateX(-2000px);
482 -ms-transform: translateX(-2000px);
483 transform: translateX(-2000px)
484 }
485 }
486 .fadeOutLeftBig {
487 -webkit-animation-name: fadeOutLeftBig;
488 animation-name: fadeOutLeftBig
489 }
490 @-webkit-keyframes fadeOutRight {
491 0% {
492 opacity: 1;
493 -webkit-transform: translateX(0);
494 transform: translateX(0)
495 }
496 100% {
497 opacity: 0;
498 -webkit-transform: translateX(20px);
499 transform: translateX(20px)
500 }
501 }
502 @keyframes fadeOutRight {
503 0% {
504 opacity: 1;
505 -webkit-transform: translateX(0);
506 -ms-transform: translateX(0);
507 transform: translateX(0)
508 }
509 100% {
510 opacity: 0;
511 -webkit-transform: translateX(20px);
512 -ms-transform: translateX(20px);
513 transform: translateX(20px)
514 }
515 }
516 .fadeOutRight {
517 -webkit-animation-name: fadeOutRight;
518 animation-name: fadeOutRight
519 }
520 @-webkit-keyframes fadeOutRightBig {
521 0% {
522 opacity: 1;
523 -webkit-transform: translateX(0);
524 transform: translateX(0)
525 }
526 100% {
527 opacity: 0;
528 -webkit-transform: translateX(2000px);
529 transform: translateX(2000px)
530 }
531 }
532 @keyframes fadeOutRightBig {
533 0% {
534 opacity: 1;
535 -webkit-transform: translateX(0);
536 -ms-transform: translateX(0);
537 transform: translateX(0)
538 }
539 100% {
540 opacity: 0;
541 -webkit-transform: translateX(2000px);
542 -ms-transform: translateX(2000px);
543 transform: translateX(2000px)
544 }
545 }
546 .fadeOutRightBig {
547 -webkit-animation-name: fadeOutRightBig;
548 animation-name: fadeOutRightBig
549 }
550 @-webkit-keyframes fadeOutUp {
551 0% {
552 opacity: 1;
553 -webkit-transform: translateY(0);
554 transform: translateY(0)
555 }
556 100% {
557 opacity: 0;
558 -webkit-transform: translateY(-20px);
559 transform: translateY(-20px)
560 }
561 }
562 @keyframes fadeOutUp {
563 0% {
564 opacity: 1;
565 -webkit-transform: translateY(0);
566 -ms-transform: translateY(0);
567 transform: translateY(0)
568 }
569 100% {
570 opacity: 0;
571 -webkit-transform: translateY(-20px);
572 -ms-transform: translateY(-20px);
573 transform: translateY(-20px)
574 }
575 }
576 .fadeOutUp {
577 -webkit-animation-name: fadeOutUp;
578 animation-name: fadeOutUp
579 }
580 @-webkit-keyframes fadeOutUpBig {
581 0% {
582 opacity: 1;
583 -webkit-transform: translateY(0);
584 transform: translateY(0)
585 }
586 100% {
587 opacity: 0;
588 -webkit-transform: translateY(-2000px);
589 transform: translateY(-2000px)
590 }
591 }
592 @keyframes fadeOutUpBig {
593 0% {
594 opacity: 1;
595 -webkit-transform: translateY(0);
596 -ms-transform: translateY(0);
597 transform: translateY(0)
598 }
599 100% {
600 opacity: 0;
601 -webkit-transform: translateY(-2000px);
602 -ms-transform: translateY(-2000px);
603 transform: translateY(-2000px)
604 }
605 }
606 .fadeOutUpBig {
607 -webkit-animation-name: fadeOutUpBig;
608 animation-name: fadeOutUpBig
609 }
610
611 // ==== pricing-area-shape
612 .app-pricing-area {
613 position: relative;
614 background-size: cover;
615 background-position: center;
616 background-repeat: no-repeat;
617 z-index: 1;
618 }
619 .app-pricing-area .shape {
620 position: absolute;
621 z-index: -1;
622 }
623 .app-pricing-area .shape:nth-child(1) {
624 width: 10px;
625 height: 10px;
626 top: 7%;
627 left: 15%;
628 position: absolute;
629 border-radius: 50%;
630 background: #37bd8a;
631 animation: zoomIn 3s linear infinite both alternate-reverse;
632 }
633 .app-pricing-area .shape:nth-child(2) {
634 width: 25px;
635 height: 25px;
636 top: 10%;
637 left: 7%;
638 position: absolute;
639 border-radius: 50%;
640 background: #bbc0c4;
641 animation: zoomIn 6s linear infinite both alternate-reverse;
642 }
643 .app-pricing-area .shape:nth-child(3) {
644 width: 10px;
645 height: 10px;
646 top: 18%;
647 right: 26%;
648 position: absolute;
649 border-radius: 50%;
650 background: #37bd8a;
651 animation: zoomIn 4s linear infinite both alternate-reverse;
652 }
653 .app-pricing-area .shape:nth-child(4) {
654 width: 25px;
655 height: 25px;
656 top: 10%;
657 right: 12%;
658 position: absolute;
659 border-radius: 50%;
660 background: #bbc0c4;
661 animation: zoomIn 5s linear infinite both alternate-reverse;
662 }
663 .app-pricing-area .shape:nth-child(5) {
664 top: 16%;
665 left: 24%;
666 position: absolute;
667 }
668 .app-pricing-area .shape:nth-child(6) {
669 right: 20%;
670 bottom: 12%;
671 position: absolute;
672 }