CSS Animations Conflicting

Question

I'm building a horizontal scroll site and my progress bar at the bottom is an animated astronaut moving across as you scroll.

On my very last slide I have an animation on some large text moving it from the right side of the screen to the left, and onto the screen as you scroll the last slide into full view.

I noticed the text animation makes my progress bar skip back a little bit when the text animation comes into play. Does anyone have any idea why this is happening? I have the same exact text animation on slide 3 of my site and nothing happens there which is weird.

/* PROGRESS BAR */

.progress-container {
  position: fixed;
  bottom: 30px;
  left: 5%;
  width: 80%;
  height: 50px;
  /* display: flex; */
  align-items: center;
  background: transparent;
  z-index: 2;
}

.progress-bar {
  height: 8px;
  width: 1%;
  position: absolute;
  overflow: visible;
  left: 92px;
  right: 70px;
  top: 66%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='20' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q 25 0, 50 10 T 100 10' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  z-index: 2;
  animation: string;
  animation-duration: 1ms;
  animation-timeline: --astronautTimeline;
  animation-direction: normal;
  animation-timing-function: linear;
}

#shuttle {
  height: 50px;
  position: absolute;
  left: 0;
  z-index: 2;
}

#astronaut {
  height: 70px;
  position: fixed;
  right: -40px;
  bottom: 15%;
  z-index: 300;
  transform: translateY(50%);
  /* animation: astronaut; */
  /* animation-duration: 1ms; */
  animation-timeline: --astronautTimeline;
  animation-direction: normal;
}

@keyframes string {
  1% {
    width: 1%
  }
  100% {
    width: 100%
  }
}


/* TEXT ANIMATION */

.text-container {
  width: 100%;
  margin-top: -10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  align-items: center;
  animation: legendary-text linear forwards;
  animation-timeline: view(x);
  animation-range: entry;
}

@keyframes legendary-text {
  from {
    transform: scale(1) translateX(50%);
    opacity: 1;
  }
  to {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}

<!-- progress bar -->

<div class="progress-container">
  <img src="https://info.tdsynnex.com/rs/946-OMQ-360/images/shuttle.png?version=0" id="shuttle" alt="">
  <div class="progress-bar" id="progressBar">
    <img src="https://info.tdsynnex.com/rs/946-OMQ-360/images/ast.png?version=0" id="astronaut" alt="">
  </div>
</div>

<!-- progress bar end -->

<!-- slide 7 -->

<div class="slide" id="slide7">
  <div class="text-container">
    <p class="become-a">BECOME A</p>
    <h1 class="lenovo-legend">LENOVO LEGEND</h1>
  </div>
</div>