Negative animation-delay를 활용한 리소스 효율적 Infinite Carousel 구현

Context

기존 Infinite Carousel 구현 시 요소 복제를 통한 무한 루프 생성 방식의 리소스 낭비 발생. 단순 좌우 이동 방식으로는 끊김 없는 부드러운 움직임을 구현하는 데 한계 존재.

Technical Solution

• 전체 컨테이너 이동 대신 개별 요소 단위의 시간 기반 애니메이션 제어 방식 채택
• 각 요소에 고유 인덱스 기반의 증분 Delay 값을 부여하여 순차적 움직임 생성
• Negative animation-delay 적용을 통한 애니메이션 시작 시점의 오프셋 조절로 즉각적인 무한 루프 시각화 구현
• will-change 속성 부여를 통한 별도의 Compositing Layer 생성으로 CPU 부하를 GPU로 전이