@import "./mouses/mouse_1.css";
@import "./mouses/mouse_2.css";
@import "./mouses/mouse_3.css";
@import "./mouses/mouse_4.css";

.mouse {
	margin: auto;
	width: fit-content;
	overflow: hidden;
}
.mouse .frames {
	position: relative;
	animation: mouse_move infinite 2s normal steps(4);
}
.mouse .frames::before {
	position: relative;
	top: 0px;
	left: 0px;
}
.mouse .frames::after {
	position: absolute;
	top: 100%;
	left: 0px;
}

/*
* using 'transform' instead of 'top', because 'top' needs
* the parent to have an explicit height
* but in this case its height is according to the children
*
*/
@keyframes mouse_move {
	0%     {transform: translateY(0%);}
	100%   {transform: translateY(-400%);}
}

