split css into multiples files, and animations count only 4 frames now

2023-11-05 01:12:03 +01:00
parent d53e21b3be
commit aa022190eb
5 changed files with 132 additions and 240 deletions
--- a/style/frames.css
+++ b/style/frames.css
@@ -0,0 +1,46 @@
+
+.frames_container {
+	display: grid;
+	width: fit-content;
+	margin-left: 0px;
+
+	/*
+	border: 1px solid blue;
+	*/
+}
+pre.frame.hide {
+	display: none;
+}
+pre.frame {
+	position: relative;
+	grid-column: 1;
+	grid-row: 1;
+	margin: auto auto 0px 0px;
+
+	/*
+	width: fit-content;
+	height: fit-content;
+
+	border: 1px solid red;
+	*/
+
+	opacity: 0;
+	--tframes: 2s;
+	animation-name: ascii_frame;
+	animation-iteration-count: infinite;
+	animation-duration: var(--tframes);
+	animation-timing-function: linear;
+	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;}
+}
+