CSS text-align delay with width animation

Question

I am trying to animate my text to appear from left to right on page load. This is done by simply setting @keyframes to transition from 0% max-width to 100%.

However my text-align settings seem to be applied only after the animation is complete. I just want the text content itself to reveal itself where I intend it to be, and assumed my code is correct.

Am I missing something obvious here? I'm fairly new to CSS, but my research doesn't seem to indicate there are inherit properties of animation or text-align that should cause this. Code example below. Thanks!

@keyframes leftright {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  white-space: nowrap;
  width: 80vw;
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  text-align: center;
  animation: leftright 1s;
}

<div class="test_1">Why hello there</div>

Answer 1

You're animating the width of the div. So the content will be revealed as the width increases. Alternatively, you could animate pseudo-selectors and reveal the text.

Hope this is the result you're expecting.

JS Fiddle