애니메이션 primitive — transition, keyframe, Tailwind 유틸리티

대부분의 UI 애니메이션은 라이브러리가 아냐 — Tailwind 유틸리티로 감싼 CSS primitive 셋. Primitive 알면 진짜 필요할 때만 Framer Motion 손이 가.

세 primitive

Transition — 두 상태 사이 interpolate (예: hover:bg-brand-strong transition-colors). 저렴, GPU 친화, state-구동 UI 의 디폴트.
Keyframe — animation 속성으로 참조하는 사전 정의 시퀀스 (@keyframes). Pulse, spinner, 루프나 여러 stop 있는 모든 것.
Web Animations API — JavaScript 구동, CSS 로 표현 불가한 오케스트레이션 (시퀀싱, 동적 duration) 용. 프레임 정확, 다만 거의 필요 없음.

Tailwind 빌트인 유틸리티

Tailwind v4 출하: transition, duration-200, ease-in-out, + 빌트인 keyframe 애니메이션 animate-spin, animate-pulse, animate-bounce, animate-ping. 본인의 @keyframes + 유틸리티 클래스 (lesson 3) 와 결합해서 필요의 90% 커버.

Framer Motion 손이 갈 때

복잡한 상호작용: 드래그앤드롭, 레이아웃 애니메이션 (FLIP), 라우트 간 공유 element 전환, 제스처 처리. 다른 easing 과 timing 가진 여러 element 시퀀싱 중이면 Framer Motion 의 animate + variants API 가 구원. 그 외 — transition 과 keyframe.

`prefers-reduced-motion` 존중

일부 사용자 (전정 장애, motion 민감성) 가 최소 애니메이션 선호. 사용자가 preference 설정했을 때 motion 무거운 효과를 disable 하는 미디어 쿼리로 감싸.

Transition 은 공짜처럼, keyframe 은 비싸게 느껴짐. 브라우저가 transform/opacity 의 transition 을 GPU compositing 에 최적화 — 레이어 repaint 안 함. 레이아웃 만지는 애니메이션 (width, height, top, left) 은 layout thrash. top/left 보다 transform: translate; display 보다 opacity.

Code

Transition — state-구동, 디폴트·tsx

function CardLink({ href, children }: { href: string; children: React.ReactNode }) {
  return (
    <a
      href={href}
      className={cn(
        "block rounded-card bg-bg-elevated p-4 shadow-sm",
        // 두 state-구동 변화, transition 유틸리티로 smooth.
        "transition-all duration-200 ease-out",
        "hover:shadow-md hover:translate-y-[-1px]"
      )}
    >
      {children}
    </a>
  );
}

Keyframe — 반복 또는 multi-stop 애니메이션·css

@layer utilities {
  .animate-fade-in {
    animation: fade-in 0.3s ease-out both;
  }
  .animate-slide-up {
    animation: slide-up 0.4s ease-out both;
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 사용자 preference 존중 */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in, .animate-slide-up {
    animation: none;
  }
}

Exercise

나타날 때 fade in + slide up 하는 <Toast> 컴포넌트 추가. @layer utilities 의 keyframe 사용, element 마운트 후 클래스 추가하는 작은 useEffect 통해 유틸리티 클래스 적용 (또는 UI 라이브러리 쓰면 Tailwind 의 data- 속성 통해). 확인: 마운트에 한 번 돔, prefers-reduced-motion 존중, layout thrash 안 트리거 (DevTools → Performance → Layout 칼럼 확인).

Hint

마운트 전용 애니메이션 패턴: element 가 opacity-0 으로 시작, 마운트 후 보이는 유틸리티로 토글. Transition 이 swap 을 smooth. 또는 위 keyframe 형태에 animation: ... both; 써서 끝 상태 persist.

애니메이션 primitive — transition, keyframe, Tailwind 유틸리티

세 primitive

Tailwind 빌트인 유틸리티

Framer Motion 손이 갈 때

`prefers-reduced-motion` 존중

Code

External links

Exercise

Progress

댓글 0

세 primitive

Tailwind 빌트인 유틸리티

Framer Motion 손이 갈 때

prefers-reduced-motion 존중

Code

External links

Exercise

Progress

`prefers-reduced-motion` 존중