[Tailwind CSS] 애니메이션

1. animate-bounce

: 요소가 위아래로 튀는 애니메이션

• 버튼이나 아이콘에 주목을 끌고 싶을 때 사용

<div class="animate-bounce">Bounce Animation</div>

 

 

2. animate-spin

: 요소를 회전시키는 애니메이션

• 로딩 스피너 구현 시 사용

<div class="animate-spin">Spin Animation</div>

 

 

3. animate-pulse

: 요소가 점차적으로 어두워졌다가 밝아지는 애니메이션

• 로딩 상태를 표현하거나 데이터가 업데이트되고 있음을 나타낼 때 사용

<div class="animate-pulse">Pulse Animation</div>

 

 

4. animate-ping

: 중앙에서 원이 확산되는 애니메이션

• 사용
  • 중앙의 고정된 원과 가장자리가 터지는 원 두 개로 구성
  • 가장자리가 터지는 원에 해당 클래스를 적용
•  알림(Notification) 효과처럼 시각적으로 주의를 끌 때 유용

<div class="relative">
  <!-- 중앙의 원 -->
  <div class="absolute w-4 h-4 bg-blue-500 rounded-full"></div>
  <!-- 가장자리가 터지는 원 -->
  <div class="absolute w-4 h-4 bg-blue-500 rounded-full animate-ping"></div>
</div>

 

 

 

---

 

Animation - Tailwind CSS

 

Transition Duration - Tailwind CSS

 

Tailwind CSS 애니메이션 사용법, 커스터마이징