for now back to working version of ascii animation

This commit is contained in:
asus
2023-12-20 14:39:04 +01:00
parent 3cfa8cfeba
commit 62d7b45822

View File

@@ -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;}