텍스트 무한 로테이션 애니메이션

<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

/* ✅ 전체 컨테이너 */
.animated-title {
  font-size: 115px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 900;
  position: relative;
  width: 100%;
  height: 120px;
  padding: 150px 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background: transparent;
  text-align: center;
  line-height: 1;
  color: white;
}

/* ✅ 애니메이션 트랙 */
.animated-title .track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 30s linear infinite;
}

/* ✅ 내용 */
.animated-title .content {
  display: inline-block;
}

/* ✅ 키프레임 애니메이션 */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ✅ 모바일 반응형 설정 */
@media (max-width: 768px) {
  .animated-title {
    font-size: 48px;
    height: 80px;
    padding: 80px 0;
  }
}
</style>

<!-- ✅ HTML 구조 -->
<div class="animated-title">
  <div class="track">
    <div class="content">
      BRANDMEDI&nbsp;BRANDMEDI&nbsp;BRANDMEDI&nbsp;BRANDMEDI&nbsp;BRANDMEDI&nbsp;BRANDMEDI&nbsp;BRANDMEDI&nbsp;
    </div>
  </div>
</div>