트랜지션과 애니메이션

부드러운 전환과 원클릭 애니메이션 탑재

정적인 웹은 따분합니다. Tailwind CSS는 마우스 호버 시 상태가 뚝뚝 끊겨 변하지 않도록 부드러운 가속 곡선을 그리는 **트랜지션(Transition)** 제어 및 로딩 아이콘 핑(ping) 스켈레톤 등의 기본 **애니메이션(Animation)**을 한 단어 문법으로 지원합니다.

⚠️ 주의: transition-all 선언 시의 성능 경고

화면 내 수백 개의 요소에 버릇처럼 transition-all(모든 속성 전환)을 부여하면 브라우저 렌더링 스택(Reflow/Repaint)에 과부하가 걸려 모바일 기기에서 프레임 저하가 발생합니다. 꼭 변형될 속성만 한정해서 transition-colors(색상 한정) 또는 transition-transform(크기 한정)처럼 타겟을 좁혀 정의하는 아키텍처가 최고 성능을 냅니다.

클래스 대항군	구체적 의미 및 설정값	실무 권장 사례
`transition-colors`	배경색, 글자색 테두리색 변형 전환 효과 활성화	`transition-colors duration-200` (버튼 호버용)
`duration-{ms}`	변환이 지속될 시간 설정 (75, 100, 150, 200, 300, 500, 700, 1000)	`duration-300` (300ms = 0.3초)
`ease-in-out`	시작과 끝은 부드럽게 감속하고 중간 속도는 빠르게 보정	부드럽고 고급스러운 UI에 무조건 권장
`animate-spin`	360도 무한 스핀 회전 애니메이션	API 통신 중 로딩 스피너(Loader icon)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Animation Playground</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen p-12 flex flex-col items-center justify-center gap-12 font-sans">
  
  <div class="max-w-2xl w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl space-y-6">
    <div class="border-b border-slate-700 pb-4 text-center">
      <h2 class="text-2xl font-black text-white">Animations Dashboard</h2>
      <p class="text-sm text-slate-400 mt-1">기본 제공되는 내장 애니메이션 효과를 확인하세요!</p>
    </div>

    <!-- Playground Targets -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 bg-slate-950 p-6 rounded-2xl justify-items-center">
      <!-- Spin -->
      <div class="flex flex-col items-center gap-2">
        <div class="w-12 h-12 border-4 border-slate-700 border-t-emerald-500 rounded-full animate-spin"></div>
        <span class="text-xs text-slate-400 font-mono">animate-spin</span>
      </div>
      <!-- Pulse -->
      <div class="flex flex-col items-center gap-2">
        <div class="w-12 h-12 bg-blue-500 rounded-full animate-pulse"></div>
        <span class="text-xs text-slate-400 font-mono">animate-pulse</span>
      </div>
      <!-- Bounce -->
      <div class="flex flex-col items-center gap-2">
        <div class="w-12 h-12 bg-indigo-500 rounded-xl animate-bounce flex items-center justify-center font-bold">✨</div>
        <span class="text-xs text-slate-400 font-mono">animate-bounce</span>
      </div>
      <!-- Ping -->
      <div class="flex flex-col items-center gap-2">
        <div class="relative flex h-10 w-10 items-center justify-center mt-1">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-6 w-6 bg-red-500"></span>
        </div>
        <span class="text-xs text-slate-400 font-mono">animate-ping</span>
      </div>
    </div>
  </div>

</body>
</html>

🔒 localhost:8000/preview

부드러운 전환과 원클릭 애니메이션 탑재

⚠️ 주의: transition-all 선언 시의 성능 경고

클래스 대항군	구체적 의미 및 설정값	실무 권장 사례
`transition-colors`	배경색, 글자색 테두리색 변형 전환 효과 활성화	`transition-colors duration-200` (버튼 호버용)
`duration-{ms}`	변환이 지속될 시간 설정 (75, 100, 150, 200, 300, 500, 700, 1000)	`duration-300` (300ms = 0.3초)
`ease-in-out`	시작과 끝은 부드럽게 감속하고 중간 속도는 빠르게 보정	부드럽고 고급스러운 UI에 무조건 권장
`animate-spin`	360도 무한 스핀 회전 애니메이션	API 통신 중 로딩 스피너(Loader icon)