CSS 애니메이션의 기본과 선택 기준

대부분의 UI 애니메이션은 CSS transition과 keyframe만으로 충분해. 기본기를 알면 라이브러리가 정말 필요한 순간도 더 잘 보여.

상태 사이 변화에는 transition을 써

Hover, focus, 열림과 닫힘처럼 시작과 끝이 분명한 변화는 CSS transition으로 표현해. Tailwind의 transition-colors, duration-200, ease-in-out 같은 유틸리티를 조합할 수 있어.

반복되거나 여러 단계인 동작에는 keyframe을 써

Spinner, pulse, bounce처럼 중간 단계가 있거나 반복되는 움직임은 @keyframes가 잘 맞아. Tailwind에는 animate-spin과 animate-pulse 같은 기본 유틸리티가 있고 직접 만든 keyframe도 연결할 수 있어.

복잡한 상호작용에만 전용 도구를 검토해

드래그, 레이아웃 이동, 여러 엘리먼트의 순차 실행, 제스처가 필요하면 Web Animations API나 Motion 라이브러리가 도움이 돼. 단순한 색상과 위치 변화라면 CSS가 더 작고 예측하기 쉬워.

움직임을 줄이는 사용자 설정을 존중해

prefers-reduced-motion이 켜졌을 때 큰 이동과 반복 애니메이션을 끄거나 짧게 줄여. 접근성 설정은 선택 기능이 아니라 기본 계약이야.

가능하면 transform과 opacity를 움직여. width, height, top, left를 계속 바꾸면 layout과 paint 비용이 커져. 브라우저가 합성 단계에서 처리하기 쉬운 속성을 고르면 더 부드러워.

Tailwind의 기본 애니메이션 도구

transition, duration-200, ease-in-out으로 상태 변화를 조절할 수 있어. animate-spin, animate-pulse, animate-bounce, animate-ping은 자주 쓰는 keyframe을 바로 제공해.

레이아웃 변화에는 더 신중해

목록의 위치가 바뀌는 FLIP 애니메이션, route 사이의 shared element, drag gesture처럼 여러 프레임의 측정과 조정이 필요하면 Motion 라이브러리가 도움이 돼. 단순 hover와 열림 효과까지 라이브러리에 맡길 필요는 없어.

전환이 끝난 뒤에도 상태가 분명해야 해

Opacity만 낮춰 버튼이 사라진 것처럼 보이게 하지 말고 disabled와 focus 계약을 함께 유지해. Reduced motion에서 움직임을 없애더라도 성공·오류·선택 상태는 색과 텍스트, 아이콘으로 이해할 수 있어야 해.

Transform과 opacity는 대체로 compositor에서 처리하기 쉬워. Width와 height, top과 left를 매 프레임 바꾸면 layout과 paint가 반복될 수 있으므로 Profiler와 브라우저 Performance 도구로 실제 비용을 확인해.

Code

상태 변화에는 transition을 기본으로 사용하기·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",
        // 두 상태 변화 모두 transition 유틸리티로 부드럽게 처리해.
        "transition-all duration-200 ease-out",
        "hover:shadow-md hover:translate-y-[-1px]"
      )}
    >
      {children}
    </a>
  );
}

반복하거나 여러 단계를 거치는 keyframe 애니메이션·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

Hover 색상에는 transition을, 반복 spinner에는 keyframe을, 처음 나타나는 Toast에는 fade와 위로 이동하는 애니메이션을 적용해. Toast가 mount할 때 한 번만 움직이고 마지막 상태를 유지하는지 확인해. 운영체제에서 reduced motion을 켰을 때 이동과 반복은 멈추지만 나타남과 상태 변화는 여전히 이해할 수 있어야 해. Performance 패널에서 불필요한 layout이 반복되지 않는지도 봐.

Hint

위치 이동은 layout 속성보다 transform과 opacity를 사용해. prefers-reduced-motion에서는 animation duration을 줄이거나 제거하고, 색과 텍스트 같은 비동작 신호를 남겨.

상태 사이 변화에는 transition을 써

반복되거나 여러 단계인 동작에는 keyframe을 써

복잡한 상호작용에만 전용 도구를 검토해

움직임을 줄이는 사용자 설정을 존중해

Tailwind의 기본 애니메이션 도구

레이아웃 변화에는 더 신중해

전환이 끝난 뒤에도 상태가 분명해야 해

Code

External links

Exercise

Progress

댓글 0