Tailwind CSS - Transition & Animation

김명원·2025년 1월 17일

learnTailwindCSS

목록 보기

5/10

Transition & Animation

Transition 개념

Transition은 CSS에서 요소가 상태(값)를 변경할 때, 그 변화를 일정 시간 동안 부드럽게 처리하는 애니메이션입니다. Tailwind CSS는 이러한 전환 효과를 간단하게 구현할 수 있는 유틸리티 클래스를 제공합니다.

기본 사용법

<body class="min-h-screen flex flex-col gap-y-4 items-center justify-center">
  <!-- Transition 미적용 -->
  <button
    class="text-5xl bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded"
  >
    Hover me
  </button>

  <!-- Transition 적용 -->
  <button
    class="text-5xl bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded transition duration-500"
  >
    Hover me
  </button>
</body>

설명

transition 클래스는 색상, 배경, 보더 등 여러 속성에 전환 효과를 적용합니다.
duration-500은 전환 시간을 500ms로 설정합니다.
hover:bg-blue-900은 마우스를 올렸을 때 배경색을 blue-900으로 변경합니다.

추가 참고: Transition을 적용할 속성(색상, 변환, 그림자 등)에 따라 다양한 유틸리티 클래스가 존재합니다.

Class	설명
`transition-none`	전환 효과 없음.
`transition-all`	모든 속성에 전환 효과 적용 (기본 지속 시간 150ms, 부드러운 전환).
`transition`	색상, 배경, 보더 등 여러 속성에 전환 효과 적용.
`transition-colors`	색상 및 배경색과 관련된 속성에 전환 효과 적용.
`transition-opacity`	투명도 변화에 전환 효과 적용.
`transition-shadow`	그림자(박스 쉐도우)에 전환 효과 적용.
`transition-transform`	크기, 위치 등 변환(transform) 속성에 전환 효과 적용.

이 내용을 모두 외울 필요는 없습니다. 이러한 기능이 있다는 것만 알고, 필요할 때 공식 문서를 참고하여 사용할 수 있습니다.

참고 문서

Animation

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

내장 애니메이션 유틸리티

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

기본 사용법 (아이콘 예시)

실습을 위해 다음 Font Awesome 링크를 추가하면 아이콘을 활용해 애니메이션 상태를 확인할 수 있습니다:

<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>

설명

animate-ping: 요소가 확장하고 투명해지는 효과를 부드럽게 만듭니다.
absolute inline-flex: 절대 위치 + inline-flex로 내부 콘텐츠 정렬 가능.
이 예제는 알림 배지나 특정 이벤트를 강조하기 위해 자주 사용됩니다.

Pulse 애니메이션

요소가 부드럽게 나타났다 사라지는 효과로, 로딩 스켈레톤 등에 많이 쓰입니다.

<div class="animate-pulse bg-gray-300 rounded-lg h-10 w-full"></div>

설명

animate-pulse: 밝기/투명도를 오가며 부드러운 박동(pulse) 효과를 제공.
로딩 중인 콘텐츠의 자리표시자로 사용하면 유용합니다.

Bounce 애니메이션

요소가 위아래로 튀는 효과로, 스크롤 안내 또는 특정 강조에 효과적입니다.

<span
  class="animate-bounce relative inline-flex rounded-full h-12 w-12 bg-indigo-600"
></span>

설명

animate-bounce: 요소가 위아래로 튀는 애니메이션을 적용합니다.

참고 문서

Tailwind CSS Animation

결론

Transition: 색상, 배경, 보더, 크기 등의 속성을 부드럽게 변경하는 데 활용합니다.
Animation: animate-spin, animate-ping 등의 유틸리티를 사용하면 별도의 CSS 작성 없이 빠르게 애니메이션을 구현할 수 있습니다.
Tailwind CSS 장점: 미리 정의된 유틸리티 클래스로 손쉽게 전환(Transition)과 애니메이션(Animation)을 적용할 수 있어, 개발 생산성과 유지보수성이 크게 향상됩니다.