animation mouse in css is working

styles/elements/mouses.css

@@ -1,53 +1,48 @@
+@import "./mouses/mouse_1.css";
+@import "./mouses/mouse_2.css";
+@import "./mouses/mouse_3.css";
+@import "./mouses/mouse_4.css";
 
 .mouse {
-	position: relative;
-	margin: 20px 0px;
-}
-.frames_container {
-	display: grid;
-	grid-template-rows: 1fr;
+	margin: auto;
 	width: fit-content;
-}
-pre.frame.hide {
-	display: none;
-}
-pre.frame {
-	position: relative;
-	justify-items: start;
-	align-items: end;
-	grid-column: 1;
-	grid-row: 1;
+	overflow: hidden;
 
-	opacity: 0;
-	--tframes: 2s;
-	animation-name: ascii_frame;
-	animation-iteration-count: infinite;
-	animation-duration: var(--tframes);
-	animation-timing-function: steps(3);
-	animation-direction: normal;
-}
+	> div {
+		position: relative;
+		top: 0%;
 
-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);}
+		/*
+		* for pseudo elements ::before and ::after
+		* for some reason it does not work when applied to them directly
+		* if they are not position absolute
+		*/
+		white-space: pre;
+		line-height: 0.8;
+		font-size: 1.0rem;
 
-@keyframes ascii_frame {
-	0%    {opacity: 1;}
-	25%   {opacity: 1;}
-	25.1% {opacity: 0;}
-	100%  {opacity: 0;}
-}
+		--tframes: 2s;
+		animation-name: mouse_move;
+		animation-iteration-count: infinite;
+		animation-duration: var(--tframes);
+		animation-direction: normal;
+		animation-timing-function: steps(1);
+	}
+	> div::before {
+		position: relative;
+		top: 0px;
+		left: 0px;
+	}
 
-#mouse_1 {
-	place-self: center;
+	> div::after {
+		position: absolute;
+		top: 100%;
+		left: 0px;
+	}
 }
-#mouse_2 {
-	left: 10%;
+@keyframes mouse_move {
+	0%    {top: 0%;}
+	25%   {top: -100%;}
+	50%   {top: -200%;}
+	75%   {top: -300%;}
 }
-#mouse_3 {
-	left: 60%;
-}
-#mouse_4 {
-	left: 20%;
-}
-