Text Align w/ Animation CSS Error

test of issue with text align applying after animation completes

HTML

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

CSS

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

.test_1 {
	
	overflow:hidden;
	white-space: nowrap;

	border: 1px solid red;

	font: bold 15vmin 'Playfair Display', serif ;
	text-align: center;
  position: relative;

}

.test_1::before{
  content: '';
  position: absolute;
  right: 0;
  top:0;
  height: 100%;
  background: #fff;
	animation: leftright 1s linear;
  }