Animation

​Basic usage

​Spin

로딩 인디케이터와 같은 엘리먼트에 선형 회전 애니메이션을 추가하려면 animate-spin 유틸리티를 사용하세요.

<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing...
</button>

​Ping

animate-ping 유틸리티를 사용하면 레이더 핑이나 물결 효과처럼 요소가 점점 커지면서 흐려지는 애니메이션을 적용할 수 있습니다. 주로 알림 배지와 같은 요소에 유용합니다.

<span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
</span>

​Pulse

animate-pulse 유틸리티를 사용하면 엘리먼트가 부드럽게 페이드 인/아웃되도록 만들 수 있습니다. 이는 스켈레톤 로더와 같은 경우에 유용합니다.

<div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-slate-200 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-slate-200 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-slate-200 rounded col-span-2"></div>
          <div class="h-2 bg-slate-200 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-slate-200 rounded"></div>
      </div>
    </div>
  </div>
</div><div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-slate-700 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-slate-700 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-slate-700 rounded col-span-2"></div>
          <div class="h-2 bg-slate-700 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-slate-700 rounded"></div>
      </div>
    </div>
  </div>
</div>

​Bounce

animate-bounce 유틸리티를 사용해 엘리먼트가 위아래로 튕기는 효과를 줄 수 있습니다. “스크롤 다운” 표시와 같은 요소에 유용합니다.

<svg class="animate-bounce w-6 h-6 ...">
  <!-- ... -->
</svg>

​Prefers-reduced-motion

사용자가 애니메이션을 줄이도록 설정한 경우, motion-safe와 motion-reduce 변형을 사용하여 애니메이션과 트랜지션을 조건부로 적용할 수 있습니다:

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  처리 중
</button>

​Applying conditionally

​호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:animate-spin 를 사용하면 animate-spin 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<div class="hover:animate-spin">
  <!-- ... -->
</div>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

​브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:animate-spin를 사용하면 중간 화면 크기 이상에서만 animate-spin 유틸리티를 적용할 수 있습니다.

<div class="md:animate-spin">
  <!-- ... -->
</div>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.

​Using custom values

​테마 커스터마이징

애니메이션은 그 특성상 프로젝트에 따라 크게 달라질 수 있습니다. 기본으로 제공되는 애니메이션은 유용한 예제로 생각하는 것이 좋습니다. 여러분의 필요에 맞게 애니메이션을 커스터마이징하는 것을 권장합니다.

기본적으로 Tailwind는 네 가지 예제 애니메이션과 animate-none 유틸리티를 제공합니다. tailwind.config.js 파일에서 theme.animation 또는 theme.extend.animation을 수정하여 이 값을 커스터마이징할 수 있습니다.

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  }
}

새로운 애니메이션 @keyframes를 추가하려면 테마 설정의 keyframes 섹션을 사용하세요:

module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      }
    }
  }
}

그런 다음 테마 설정의 animation 섹션에서 이 키프레임을 이름으로 참조할 수 있습니다:

module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      }
    }
  }
}

기본 테마 커스터마이징에 대해 더 알아보려면 테마 커스터마이징 문서를 참고하세요.

​임의 값

테마에 포함시키기 어려운 animation 값을 일회성으로 사용해야 한다면, 대괄호를 사용해 임의의 값으로 속성을 즉석에서 생성할 수 있습니다.

<div class="animate-[wiggle_1s_ease-in-out_infinite]">
  <!-- ... -->
</div>

임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.