1 | @keyframes slide-in-up {
|
2 | 0% {
|
3 | opacity: 0;
|
4 | transform: translateY($animation-offset);
|
5 | }
|
6 | 100% {
|
7 | opacity: 1;
|
8 | transform: translateX(0);
|
9 | }
|
10 | }
|
11 |
|
12 | @keyframes slide-in-down {
|
13 | 0% {
|
14 | opacity: 0;
|
15 | transform: translateY(-$animation-offset);
|
16 | }
|
17 | 100% {
|
18 | opacity: 1;
|
19 | transform: translateX(0);
|
20 | }
|
21 | }
|
22 |
|
23 | @keyframes slide-in-right {
|
24 | 0% {
|
25 | opacity: 0;
|
26 | transform: translateX($animation-offset);
|
27 | }
|
28 | 100% {
|
29 | opacity: 1;
|
30 | transform: translateX(0);
|
31 | }
|
32 | }
|
33 |
|
34 | @keyframes slide-in-left {
|
35 | 0% {
|
36 | opacity: 0;
|
37 | transform: translateX(-$animation-offset);
|
38 | }
|
39 | 100% {
|
40 | opacity: 1;
|
41 | transform: translateX(0);
|
42 | }
|
43 | }
|
44 |
|
45 | @keyframes fade-in {
|
46 | 0% {
|
47 | opacity: 0;
|
48 | }
|
49 | 100% {
|
50 | opacity: 1;
|
51 | }
|
52 | }
|
53 |
|
54 | @keyframes scale-down-in {
|
55 | 0% {
|
56 | opacity: 0;
|
57 | transform: scale(1.5,1.5);
|
58 | }
|
59 | 100% {
|
60 | opacity: 1;
|
61 | transform: scale(1,1);
|
62 | }
|
63 | }
|
64 |
|
65 | @keyframes scale-up-in {
|
66 | 0% {
|
67 | opacity: 0;
|
68 | transform: scale(0.5,0.5);
|
69 | }
|
70 | 100% {
|
71 | opacity: 1;
|
72 | transform: scale(1,1);
|
73 | }
|
74 | }
|
75 |
|
76 | .slide-in-up{ opacity: 0; animation: slide-in-up $animation-duration forwards; }
|
77 | .slide-in-down{ opacity: 0; animation: slide-in-down $animation-duration forwards; }
|
78 | .slide-in-left{ opacity: 0; animation: slide-in-left $animation-duration forwards; }
|
79 | .slide-in-right{ opacity: 0; animation: slide-in-right $animation-duration forwards; }
|
80 | .slide-out-up{ @extend .slide-in-up; animation-direction: reverse; }
|
81 | .slide-out-down{ @extend .slide-in-down; animation-direction: reverse; }
|
82 | .slide-out-left{ @extend .slide-in-left; animation-direction: reverse; }
|
83 | .slide-out-right{ @extend .slide-in-right; animation-direction: reverse; }
|
84 | .fade-in{ opacity: 0; animation: fade-in $animation-duration forwards; }
|
85 | .fade-out{ @extend .fade-in; animation-direction: reverse; }
|
86 | .scale-down-in{ opacity: 0; animation: scale-down-in $animation-duration forwards; }
|
87 | .scale-up-in{ opacity: 0; animation: scale-up-in $animation-duration forwards; }
|
88 |
|
89 | .loop{ animation-iteration-count: infinite; } |
\ | No newline at end of file |