reveal animation 질문

안녕하세요 선생님

Home 섹션에서

<div class="home-heading">
    <span>Creative</span>
    <span>Architecture</span>
    <span>Specialists</span>
</div>

이렇게 span 태그 안에 한 단어일때는 width 0% -> width 100% reveal 애니메이션이 문제없이 작동하는데,

다른텍스트로 연습을 했을 때 중간에 띄어쓰기가 있으면 덜컹거리는 현상이 발생하는데요(두줄이었다가 한줄로 덜컹거림)

ex)

<div class="home-heading">
     <span>Creative as</span>
     <span>Architecture</span>
     <span>Specialists</span>
</div>

이런식으로 띄어쓰기 후 두글자 추가했을 때 줄바꿈이 나타나지 않으려면 어떻게 해야하나요??

아래 CSS 코드 첨부합니다.

.home-heading {
	position: absolute;
	top: 50%;
	left: 250px;
	transform: translateY(-50%);
}
.home-heading span {
	display: block;
	font-size: 115px;
	color: #fff;
	font-weight: bold;
	width: 0;
	overflow: hidden;
	animation: reveal .5s 2.5s ease-in forwards;
}
@keyframes reveal {
	0% {width: 0;}
	100% {width: 100%;}
}

원인이 뭔지 궁금합니다ㅠㅠ

인프런 커뮤니티 질문&답변