css 애니메이션 반복관련. 채택완료

텍스트 한줄씩 순차적으로 보이다가 한꺼번에 없어지게

아래처럼 소스를 만들었습니다. (챗GPT에 물어서 간신히 도출한 소스입니다 ㅠ)

사라지고 약 5초후쯤에 다시 애니메이션이 무한 반복되도록 하고 싶습니다.

답변 부탁드립니다.

-------------------------------------------------------------

<div class="text-container">
  <div class="line line1">첫 번째 줄 텍스트</div>
  <div class="line line2">두 번째 줄 텍스트</div>
  <div class="line line3">세 번째 줄 텍스트</div>
</div>

<style>
.text-container { width:400px; border:#ccc solid 1px; text-align:right; padding:20px; margin:40px auto;}

.line1 {
  opacity: 0;
  animation: fadeIn1 1s ease-in-out forwards;
}
.line2 {
  opacity: 0;
  animation: fadeIn2 1s ease-in-out forwards;
  animation-delay: 1s;
}
.line3 {
  opacity: 0;
  animation: fadeIn3 1s ease-in-out forwards;
  animation-delay: 2s;
}

@keyframes fadeIn1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn3 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.line1.fadeOut, .line2.fadeOut, .line3.fadeOut {
  animation: fadeOut 2s ease-in-out forwards;
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0; transform: scale(2);}
}
</style>

<script>
setTimeout(() => {
  document.querySelectorAll('.line1, .line2, .line3').forEach(el => {
    el.classList.add('fadeOut');
  });
}, 5000);
</script>

-------------------------------------------------------------