애니메이션 유틸리티
애니메이션 유틸리티 (Animation)
Tailwind는 CSS 애니메이션으로 요소를 움직이는 유틸리티를 기본 제공해요. 로딩 표시, 알림 배지, 스켈레톤 로더 같은 흔한 패턴을 클래스 하나로 간단히 구현할 수 있어요. 각 유틸리티는 @keyframes와 함께 정의되어 있어서 직접 키프레임을 작성할 필요가 없어요.
제공되는 애니메이션
| 클래스 | 동작 |
|---|---|
animate-spin |
spin 1s linear infinite — 요소를 선형으로 계속 회전 |
animate-ping |
ping 1s cubic-bezier(0, 0, 0.2, 1) infinite — 커지며 사라지는 펄스 |
animate-pulse |
pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite — 은은하게 깜빡임 |
animate-bounce |
bounce 1s infinite — 튀어오르는 동작 |
animate-none |
animation: none — 애니메이션 없음 |
회전 애니메이션은 로딩 인디케이터 같은 요소에 특히 어울려요.
<button type="button" class="bg-indigo-500 ..." disabled>
<svg class="mr-3 size-5 animate-spin ..." viewBox="0 0 24 24">
<!-- ... -->
</svg>
Processing...
</button>
animate-ping은 레이더 펄스나 물결처럼 요소가 커지며 사라지는 효과인데, 알림 배지 같은 곳에 유용해요.
<span class="relative flex size-3">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"></span>
<span class="relative inline-flex size-3 rounded-full bg-sky-500"></span>
</span>
animate-pulse는 스켈레톤 로더처럼 요소가 서서히 밝아졌다 어두워지는 효과를 줘요.
<div class="mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4">
<div class="flex animate-pulse space-x-4">
<div class="size-10 rounded-full bg-gray-200"></div>
<div class="flex-1 space-y-6 py-1">
<div class="h-2 rounded bg-gray-200"></div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 h-2 rounded bg-gray-200"></div>
<div class="col-span-1 h-2 rounded bg-gray-200"></div>
</div>
<div class="h-2 rounded bg-gray-200"></div>
</div>
</div>
</div>
</div>
이미 정의된 애니메이션 외에도 임의 값을 자유롭게 넣고 싶다면 animate-[...] 문법으로 직접 CSS 애니메이션 값을 주는 것도 가능해요.