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

Answer 2

You're animating the width of the element. Center alignment of text is only apparent when there is extra space. A very simple fix however is to center the div itself with margin: 0 auto;.

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

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

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

Answer 3

You may consider a nested element where you apply the same width and then rely on overflow to hide it and keep the text unchanged:

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

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

.test_1>span {
  display: inline-block;
  white-space: nowrap;
  width: inherit;
}

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

Answer 4

Welcome @user10294993! You can do it adding two keyframes: one for de box and othe for the text. Here is an example:

.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 infinite;
}

.test_1 p {
  margin: 0;
  animation: display 1s infinite;
} 

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

@keyframes display{
  0% {opacity: 0}
  50% {opacity: 0}
  100% {opacity: 1}
}

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

Hope it helps you.