animation 질문- 하나의 @keyframes로 특정 이벤트없이 한번, hover이벤트시 한번 적용 방법 문의.

animation 질문- 하나의 @keyframes로 특정 유저 이벤트없이 한번, 마우스 hover 이벤트시 한번 적용하는 방법 문의 드립니다.

css 강의 ‘animation 실습’ 강의 40분 전후의 쇼핑몰 배너 애니매이션 코드를 변경해서 아래 코드처럼

/* html 부분 */ 
 <section class="mainBanner">
    <h1 class="text">Welcome to my shop</h1>
  </section>


/* css 부분 */
.text {
  font-size: 42px;
  font-weight: 700;
  color: white;
  text-shadow: 9px 6px 5px rgba(0, 0, 0, 0.5);
  animation: titleText 1s ease-in-out;
}
.mainBanner:hover .text {
  animation: titleText 1s ease-in-out;
}
@keyframes titleText {
  0% {
    transform: translateY(70px);
  }
  92% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes에 titleText란 이름으로 정의한 애니메이션을, 페이지 로드시에 1번, 마우스 hover 시 1번 재생시키려고 css를 작성했더니 로드시에만 적용되고 호버시엔 적용이 안되더군요.

그래서 아래처럼 동일 keframes를 복사 붙여넣기 하고 이름만 바꿔서 hover에 적용하였더니 잘되더군요.

{
  font-size: 42px;
  font-weight: 700;
  color: white;
  text-shadow: 9px 6px 5px rgba(0, 0, 0, 0.5);
  animation: titleText 1s ease-in-out;
}
.mainBanner:hover .text {
  animation: titleText2 1s ease-in-out;
}
@keyframes titleText {
  0% {
    transform: translateY(70px);
  }
  92% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes titleText2 {
  0% {
    transform: translateY(70px);
  }
  92% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

이런식의 중복 css가 발생하는 비효율적인 방법말고, 하나의 @keyframes로 특정 유저 이벤트없이 한번, hover이벤트시 한번 적용하는 방법 중 html, css만으로 적용하는 방법이 없을까요?

도움 부탁드립니다~

.mainBanner:hover .text {
  animation: titleText 1s ease-in-out;
  animation-iteration-count: infinite; // 이 부분을 추가합니다
}

.text {
  font-size: 42px;
  font-weight: 700;
  color: white;
  text-shadow: 9px 6px 5px rgba(0, 0, 0, 0.5);
  animation: titleText 1s ease-in-out, hoverTitleText 1s ease-in-out;
}
.mainBanner:hover .text {
  animation: hoverTitleText 1s ease-in-out;
}
@keyframes titleText {
  0% {
    transform: translateY(70px);
  }
  92% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes hoverTitleText {
  0% {
    /* hover 시 적용할 애니메이션 상태 */
  }
  100% {
    /* hover 시 도달해야 할 애니메이션 상태 */
  }
}