Text Animation Help

Site URL: https://www.imperialcitizenship.squarespace.com

password: imperialcitizenship

Hi, I need help adjusting the animation of my code. Currently, this animation start at the edge of the screen on the right. However, I want it to start in the center filling up my whole screen then infinitely continuing. How do I adjust the code?

Animation starts at the right:

What I want, animation starts in the middle and also going out to the far left of the screen:

Existing code:

//SCROLLING VERTICAL TEXT
.vertscroll {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.vertscroll span {
  display: inline-block;
  padding-left: 100%;
  animation: vertscroll 60s linear infinite;
}

.vertscroll2 span {
  animation-delay: 30s;
}

@keyframes vertscroll {
  0% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

<h4 class="vertscroll">
  <span>Antiqua and Barbuda&emsp;&emsp;Dominica&emsp;&emsp;St. Lucia&emsp;&emsp;St. Kitts and Nevis&emsp;&emsp;Grenad&emsp;&emsp;Cyprus&emsp;&emsp;Malta&emsp;&emsp;Turkey&emsp;&emsp;Vanuatu&emsp;&emsp;Montenegro&emsp;&emsp;Greece&emsp;&emsp;Portugal&emsp;&emsp;</span>
</h4>
<h4 class="vertscroll vertscroll2">
  <span>Antiqua and Barbuda&emsp;&emsp;Dominica&emsp;&emsp;St. Lucia&emsp;&emsp;St. Kitts and Nevis&emsp;&emsp;Grenad&emsp;&emsp;Cyprus&emsp;&emsp;Malta&emsp;&emsp;Turkey&emsp;&emsp;Vanuatu&emsp;&emsp;Montenegro&emsp;&emsp;Greece&emsp;&emsp;Portugal&emsp;&emsp;</span>
</h4>

Thank you!