CSS Transition 애니매이션 구현 원리

애니메이션 구현 원리 (CSS Transition)

Javascript로 width나 border-radius를 1프레임씩 계산해서 변경하는 방식 대신, CSS Transition을 활용한 선언적 애니메이션을 구현했습니다.

구현 방식

1. State 기반 클래스 스위칭: React는 단순히 className만 변경합니다.
2. 브라우저 보간(Interpolation): transition-all duration-300을 통해 브라우저가 시작 상태와 끝 상태 사이를 자동으로 부드럽게 연결합니다.

<nav
  className={`transition-all duration-300 ease-in-out ${
    isSticky
      ? "w-fit rounded-full mt-4" // Sticky 상태 (알약 모양)
      : "w-full rounded-none"     // 일반 상태 (직각)
  }`}
>

이점

• GPU 가속 활용: CSS Transition은 브라우저의 컴포지터 스레드(Compositor Thread)에서 처리될 확률이 높아 메인 스레드 부하 없이 부드러운 60fps 애니메이션이 가능합니다.
• 코드 복잡도 감소: JS로 애니메이션 프레임을 계산하는 복잡한 로직이 필요 없습니다.