aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles/animations.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles/animations.scss')
-rw-r--r--src/styles/animations.scss50
1 files changed, 30 insertions, 20 deletions
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 35125dec5..dcc9690fb 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -1,43 +1,51 @@
1@import "./globals.scss"; 1@import './globals.scss';
2 2
3// FadeIn 3// FadeIn
4.fadeIn-appear { opacity: .01; } 4.fadeIn-appear {
5 opacity: 0.01;
6}
5 7
6.fadeIn-appear.fadeIn-appear-active { 8.fadeIn-appear.fadeIn-appear-active {
7 opacity: 1; 9 opacity: 1;
8 transition: opacity .5s ease-out; 10 transition: opacity 0.5s ease-out;
9} 11}
10 12
11.fadeIn-enter { 13.fadeIn-enter {
12 opacity: .01; 14 opacity: 0.01;
13 transition: opacity .5s ease-out; 15 transition: opacity 0.5s ease-out;
14} 16}
15 17
16.fadeIn-leave { opacity: 1; } 18.fadeIn-leave {
19 opacity: 1;
20}
17 21
18.fadeIn-leave.fadeIn-leave-active { 22.fadeIn-leave.fadeIn-leave-active {
19 opacity: .01; 23 opacity: 0.01;
20 transition: opacity 300ms ease-in; 24 transition: opacity 300ms ease-in;
21} 25}
22 26
23// FadeIn Fast 27// FadeIn Fast
24.fadeIn-fast-appear { opacity: .01; } 28.fadeIn-fast-appear {
29 opacity: 0.01;
30}
25 31
26.fadeIn-fast-appear.fadeIn-fast-appear-active { 32.fadeIn-fast-appear.fadeIn-fast-appear-active {
27 opacity: 1; 33 opacity: 1;
28 transition: opacity .25s ease-out; 34 transition: opacity 0.25s ease-out;
29} 35}
30 36
31.fadeIn-fast-enter { 37.fadeIn-fast-enter {
32 opacity: .01; 38 opacity: 0.01;
33 transition: opacity .25s ease-out; 39 transition: opacity 0.25s ease-out;
34} 40}
35 41
36.fadeIn-fast-leave { opacity: 1; } 42.fadeIn-fast-leave {
43 opacity: 1;
44}
37 45
38.fadeIn-fast-leave.fadeIn-fast-leave-active { 46.fadeIn-fast-leave.fadeIn-fast-leave-active {
39 opacity: .01; 47 opacity: 0.01;
40 transition: opacity .25s ease-in; 48 transition: opacity 0.25s ease-in;
41} 49}
42 50
43// Slide down 51// Slide down
@@ -48,12 +56,12 @@
48 56
49.slideDown-appear.slideDown-appear-active { 57.slideDown-appear.slideDown-appear-active {
50 max-height: 500px; 58 max-height: 500px;
51 transition: max-height .5s ease-out; 59 transition: max-height 0.5s ease-out;
52} 60}
53 61
54.slideDown-enter { 62.slideDown-enter {
55 max-height: 0; 63 max-height: 0;
56 transition: max-height .5s ease-out; 64 transition: max-height 0.5s ease-out;
57} 65}
58 66
59// Slide up 67// Slide up
@@ -65,18 +73,20 @@
65.slideUp-appear.slideUp-appear-active { 73.slideUp-appear.slideUp-appear-active {
66 opacity: 1; 74 opacity: 1;
67 transform: translateY(0px); 75 transform: translateY(0px);
68 transition: all .3s ease-out; 76 transition: all 0.3s ease-out;
69} 77}
70 78
71.slideUp-enter { 79.slideUp-enter {
72 opacity: 0; 80 opacity: 0;
73 transform: translateY(20px); 81 transform: translateY(20px);
74 transition: all .3s ease-out; 82 transition: all 0.3s ease-out;
75} 83}
76 84
77.slideUp-leave { opacity: 1; } 85.slideUp-leave {
86 opacity: 1;
87}
78 88
79.slideUp-leave.slideUp-leave-active { 89.slideUp-leave.slideUp-leave-active {
80 opacity: .01; 90 opacity: 0.01;
81 transition: opacity 300ms ease-in; 91 transition: opacity 300ms ease-in;
82} 92}