83 lines
1.3 KiB
CSS
83 lines
1.3 KiB
CSS
|
|
.mouse {
|
|
position: relative;
|
|
margin: 20px 0px;
|
|
}
|
|
.frames_container {
|
|
display: grid;
|
|
grid-template-rows: repeat(4, 1fr);
|
|
width: fit-content;
|
|
/*
|
|
border: 1px solid blue;
|
|
*/
|
|
}
|
|
pre.frame.hide {
|
|
display: none;
|
|
}
|
|
pre.frame {
|
|
position: relative;
|
|
margin: auto auto 0px 0px;
|
|
/*
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
|
|
width: fit-content;
|
|
height: fit-content;
|
|
|
|
border: 1px solid red;
|
|
|
|
visibility: hidden;
|
|
display: grid;
|
|
*/
|
|
|
|
opacity: 0;
|
|
--tframes: 2s;
|
|
animation-name: ascii_frame;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: var(--tframes);
|
|
animation-timing-function: steps(3);
|
|
animation-direction: normal;
|
|
}
|
|
|
|
/*
|
|
*/
|
|
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
|
|
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
|
|
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
|
|
|
@keyframes ascii_frame {
|
|
/*
|
|
0% {opacity: 1;}
|
|
25% {opacity: 1;}
|
|
25.1% {opacity: 0;}
|
|
100% {opacity: 0;}
|
|
|
|
from {opacity: 1;}
|
|
to {opacity: 0;}
|
|
|
|
from {visibility: visible;}
|
|
to {visibility: hidden;}
|
|
|
|
from {display: grid;}
|
|
to {display: none;}
|
|
*/
|
|
0% {opacity: 1;}
|
|
25% {opacity: 1;}
|
|
25.1% {opacity: 0;}
|
|
100% {opacity: 0;}
|
|
}
|
|
|
|
#mouse_1 {
|
|
place-self: center;
|
|
}
|
|
#mouse_2 {
|
|
left: 10%;
|
|
}
|
|
#mouse_3 {
|
|
left: 60%;
|
|
}
|
|
#mouse_4 {
|
|
left: 20%;
|
|
}
|
|
|