126 lines
No EOL
2.3 KiB
CSS
126 lines
No EOL
2.3 KiB
CSS
/* loading animation */
|
|
|
|
@keyframes appear {
|
|
0% {
|
|
visibility: visible;
|
|
display: block
|
|
}
|
|
99% {
|
|
visibility: hidden;
|
|
display: none
|
|
}
|
|
}
|
|
|
|
.nojs {
|
|
animation: 4.5s 1 reverse appear;
|
|
animation-delay: 4.5s;
|
|
animation-fill-mode: forwards;
|
|
visibility: hidden;
|
|
position: fixed
|
|
}
|
|
|
|
.credit {
|
|
animation: 4.5s 1 reverse appear;
|
|
animation-delay: 4.5s;
|
|
animation-fill-mode: forwards;
|
|
visibility: hidden;
|
|
position: fixed
|
|
}
|
|
|
|
.skip-animation {
|
|
animation: 4.5s 1 linear appear;
|
|
visibility: hidden;
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.loading > p:first-child {
|
|
animation: 0.9s 1 linear appear;
|
|
animation-fill-mode: forwards;
|
|
animation-delay: 0.3s;
|
|
visibility: hidden;
|
|
position: fixed
|
|
}
|
|
|
|
.loading > p:not(:first-child):not(:last-child) {
|
|
animation: 0.9s 1 linear appear;
|
|
animation-delay: 1.2s;
|
|
animation-fill-mode: forwards;
|
|
visibility: hidden;
|
|
position: fixed
|
|
}
|
|
|
|
.loading > p:last-child {
|
|
animation: 0.9s 1 linear appear;
|
|
animation-delay: 2.1s;
|
|
animation-fill-mode: forwards;
|
|
visibility: hidden;
|
|
position: fixed
|
|
}
|
|
|
|
@keyframes splash {
|
|
0%, 100% {
|
|
visibility: visible;
|
|
color: var(--c-bg);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.splash {
|
|
animation-duration: 1.5s, 1.5s;
|
|
animation-iteration-count: 1, 1;
|
|
animation-timing-function: linear, linear;
|
|
animation-name: appear, splash;
|
|
animation-delay: 3s, 3s;
|
|
visibility: hidden;
|
|
position: fixed
|
|
}
|
|
|
|
@keyframes splash-bg {
|
|
0%, 100% {
|
|
background-color: var(--c-splash);
|
|
}
|
|
}
|
|
|
|
html {
|
|
animation: 1.5s 1 linear splash-bg;
|
|
animation-delay: 3s
|
|
}
|
|
|
|
@keyframes splash-fg {
|
|
0%, 100% {
|
|
color: var(--c-bg);
|
|
}
|
|
}
|
|
|
|
.skip-notice {
|
|
animation-duration: 4.5s, 1.5s;
|
|
animation-iteration-count: 1, 1;
|
|
animation-timing-function: linear, linear;
|
|
animation-name: appear, splash-fg;
|
|
animation-delay: 0s, 3s;
|
|
visibility: hidden;
|
|
}
|
|
|
|
@keyframes js {
|
|
0%, 100% {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.js {
|
|
animation: 4.5s 1 linear js;
|
|
position: fixed;
|
|
}
|
|
|
|
@supports not (animation: 1s test) {
|
|
.nojs {
|
|
display: block;
|
|
visibility: visible
|
|
}
|
|
} |