애니메이션 개요

애니메이션은 요소가 시각적으로 움직이거나 변화하는 것을 말합니다. Tailwind CSS에서는 다양한 내장 애니메이션 유틸리티를 제공하여, 쉽고 빠르게 애니메이션 효과를 적용할 수 있습니다.

내장 애니메이션 유틸리티

클래스 설명
animate-none 애니메이션 없음
animate-spin 요소가 계속해서 회전 (로딩 인디케이터에 유용)
animate-ping 레이더 핑 또는 물결처럼 확장하며 희미해지는 효과
animate-pulse 요소가 부드럽게 사라지고 나타나는 효과 (로딩 스켈레톤에 유용)
animate-bounce 요소가 위아래로 튀는 효과 (스크롤 다운 표시 등에 유용)

<aside> ❗

Transition vs Animation

쉽게 말해, Transition은 상태 변화의 중간 과정을 다루고, Animation은 지속적인 동작을 다룹니다.

</aside>

기본 사용법

실습을 위해서 아래 링크를 추가해주세요.

<link
  rel="stylesheet"
  href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css>"
/>

Spin 애니메이션

로딩 인디케이터처럼 요소가 계속 회전하는 애니메이션입니다.

<main
  class="container min-h-screen flex flex-col items-center justify-center gap-y-4 p-10"
>
  <button
    type="button"
    class="bg-indigo-500 text-white text-3xl p-5 flex items-center gap-x-3 rounded"
    disabled
  >
    <i class="fa-solid fa-spinner animate-spin"></i>
    Processing...
  </button>
</main>

Ping 애니메이션

요소가 확장하며 사라지는 핑(ping) 효과를 나타냅니다.

<span class="relative flex h-12 w-12">
    <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-12 w-12 bg-sky-500"></span>
</span>

설명: