How Can I Make My Vertical Css Marquee Repeat

I'm trying to make a vertical marquee loop without any whitespace/gaps but I can't seem to make it repeat. I added aria-hidden='true' which worked on my horizontal marquee but does

Solution 1:

/* Please try this instead */body {
	background-color: black;
}

.side-bar {
	top: 0;
	left: 0;
	height: 100%;
	color: white;
	writing-mode: vertical-rl;
	text-orientation: sideways-right;
}

.marqueep {
	overflow: hidden;
	white-space: nowrap;
	height: 100%;
}

.marqueespan {
	animation: marquee 8s linear infinite;
	display: inline-flex;
	padding-right: 10px;
	font-size: 4rem;
}

@keyframes marquee {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

<divclass="position-fixed side-bar"><divclass="row marquee"><divclass="col-12 bg-white"><pclass="m-0 p-0 p-3"><spanclass="m-0 p-0 pb-4"aria-hidden="true">USE CODE "MLT"</span><spanclass="m-0 p-0 pb-4"aria-hidden="true">USE CODE "MLT"</span><spanclass="m-0 p-0"aria-hidden="true">USE CODE "MLT"</span></p></div></div></div>

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

@keyframes marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

This code changes to the following.

.marqueep{
  overflow: hidden;
  white-space: nowrap;
  height:100%;
}

@keyframes marquee {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

Solved in codepen

https://codepen.io/Rayeesac/pen/OJMWMpm

More examples are

Horizontal marquee without white space and JS

Vertical marquee without white space and JS