for now back to working version of ascii animation
This commit is contained in:
@@ -5,31 +5,19 @@
|
|||||||
}
|
}
|
||||||
.frames_container {
|
.frames_container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: repeat(4, 1fr);
|
grid-template-rows: 1fr;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
/*
|
|
||||||
border: 1px solid blue;
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
pre.frame.hide {
|
pre.frame.hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
pre.frame {
|
pre.frame {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto auto 0px 0px;
|
justify-items: start;
|
||||||
/*
|
align-items: end;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
|
|
||||||
width: fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
|
|
||||||
border: 1px solid red;
|
|
||||||
|
|
||||||
visibility: hidden;
|
|
||||||
display: grid;
|
|
||||||
*/
|
|
||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
--tframes: 2s;
|
--tframes: 2s;
|
||||||
animation-name: ascii_frame;
|
animation-name: ascii_frame;
|
||||||
@@ -39,28 +27,11 @@ pre.frame {
|
|||||||
animation-direction: normal;
|
animation-direction: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
*/
|
|
||||||
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
|
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
|
||||||
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
|
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
|
||||||
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
||||||
|
|
||||||
@keyframes ascii_frame {
|
@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;}
|
0% {opacity: 1;}
|
||||||
25% {opacity: 1;}
|
25% {opacity: 1;}
|
||||||
25.1% {opacity: 0;}
|
25.1% {opacity: 0;}
|
||||||
|
|||||||
Reference in New Issue
Block a user