75 lines
1.4 KiB
CSS
75 lines
1.4 KiB
CSS
* {
|
|
--animation-duration: 1s;
|
|
--font-size: 2vw;
|
|
text-align: center
|
|
}
|
|
|
|
|
|
body {
|
|
text-align: center;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
pre {
|
|
font-size: var(--font-size);
|
|
text-align: left;
|
|
|
|
line-height: 115%;
|
|
|
|
font-weight: bold;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #6080d0;
|
|
}
|
|
a:visited {
|
|
/* color: #d070e0; */
|
|
color: auto;
|
|
}
|
|
|
|
|
|
.animate {
|
|
animation-duration: var(--animation-duration);
|
|
animation-iteration-count: infinite;
|
|
/* animation-direction: */
|
|
animation-timing-function: linear;
|
|
|
|
height: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
.two-frames { animation-name: two_frames;}
|
|
.four-frames { animation-name: four_frames;}
|
|
|
|
.dl-2-a { animation-delay: 0s;}
|
|
.dl-2-b { animation-delay: calc(var(--animation-duration) / 2); }
|
|
|
|
.dl-4-a { animation-delay: 0.0s;}
|
|
.dl-4-b { animation-delay: calc(var(--animation-duration) / 4); }
|
|
.dl-4-c { animation-delay: calc(var(--animation-duration) / 2); }
|
|
.dl-4-d { animation-delay: calc(var(--animation-duration) * .75); }
|
|
|
|
|
|
|
|
@keyframes two_frames {
|
|
from { opacity: 0%; height: 0px}
|
|
49.99% { opacity: 0%; height: 0px}
|
|
50% { opacity: 100%; height: auto}
|
|
to { opacity: 100%; height: auto}
|
|
}
|
|
|
|
@keyframes four_frames {
|
|
from { opacity: 0%; height: 0px}
|
|
74.99% { opacity: 0%; height: 0px}
|
|
75% { opacity: 100%; height: auto}
|
|
to { opacity: 100%; height: auto}
|
|
}
|
|
|
|
|
|
|