scrumplex.net
My personal website
1@import "variables";
2
3@keyframes panel-fade-in {
4 from {
5 opacity: 0;
6 }
7
8 to {
9 opacity: 1;
10 }
11}
12
13@keyframes panel-splash-fade-in {
14 from {
15 opacity: 0;
16 transform: translateY(100vh);
17 }
18
19 to {
20 opacity: 1;
21 transform: translateY(0);
22 }
23}
24
25@media screen and (min-width: 768px) {
26 @keyframes panel-fade-in {
27 from {
28 opacity: 0;
29 }
30 to {
31 opacity: 1;
32 }
33 }
34
35 @keyframes panel-splash-fade-in {
36 from {
37 opacity: 0;
38 transform: translateY(50%);
39 }
40
41 to {
42 opacity: 1;
43 transform: translateY(-50%);
44 }
45 }
46}
47
48@keyframes panel-before-fade-in {
49 from {
50 background-position-x: -$longShadowLength;
51 }
52
53 to {
54 background-position-x: 0;
55 }
56}
57
58@keyframes panel-after-fade-in {
59 from {
60 background-position-y: -$longShadowLength;
61 }
62
63 to {
64 background-position-y: 0;
65 }
66}
67
68@keyframes panel-highlight {
69 from {
70 color: $colorBrand;
71 }
72
73 to {
74 color: unset;
75 }
76}
77
78@keyframes scroll-indicator-fade-in {
79 from {
80 transform: translateY(-50vh);
81 opacity: 0;
82 }
83
84 to {
85 transform: translateY(-10%);
86 opacity: 1;
87 }
88}
89
90@keyframes float {
91 from {
92 transform: translateY(-10%);
93 }
94
95 to {
96 transform: translateY(10%);
97 }
98}