TailwindCSS 애니메이션과 트랜지션 심화 가이드

웹 UI에 생동감을 더해주는 애니메이션(Animation)과 트랜지션(Transition)을 TailwindCSS로 심화 활용하는 방법을 단계별로 살펴봅니다. 기본적인 호버·변환 효과를 넘어, 반복 애니메이션, 키프레임, 조작 가능한 타이밍 함수 등을 활용해 더욱 풍부한 인터랙션을 구현해 보세요.

---

목차

1. Transition 속성 심화
2. Keyframe 애니메이션 정의
3. Tailwind 커스텀 애니메이션 확장
4. 인터랙션 기반 애니메이션 적용
5. 애니메이션 성능 최적화

---

1. Transition 속성 심화

Transition 심화

스케일 트랜지션

Transition은 상태 변화(예: 호버, 포커스 등) 시 CSS 프로퍼티의 변화를 부드럽게 만들어 줍니다. Tailwind에서는 transition 유틸리티와 속성별 클래스(transition-colors, transition-transform 등)를 제공합니다.

<button class="transition-colors duration-500 ease-in-out bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
  컬러 부드럽게 변경
</button>

• transition-colors: 색상 변경만 트랜지션
• duration-500: 0.5초 지속
• ease-in-out: 가속·감속 조합

<div class="transition-transform duration-300 hover:scale-105 transform bg-gray-200 p-6 rounded">
  스케일 트랜지션
</div>

• transition-transform: 변형(transform)만 트랜지션
• hover:scale-105: 5% 확대

차이점

• transition (모든 속성) vs. transition-colors/transition-transform (선택 속성)
• ease-linear/ease-in/ease-out/ease-in-out 등 타이밍 함수 선택에 따라 느낌이 달라짐

---

2. Keyframe 애니메이션 정의

Custom Keyframe 애니메이션

흔들리는 요소 (wiggle)

페이드인 요소 (fadeIn)

복잡한 반복 애니메이션이나 여러 단계 변화를 위해서는 CSS @keyframes 규칙을 사용합니다. Tailwind animation 유틸리티만으로는 커스텀 키프레임을 정의할 수 없으므로, tailwind.config.js에서 확장합니다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%':     { transform: 'rotate(3deg)' },
        },
        fadeIn: {
          '0%':   { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
        fadeIn: 'fadeIn 0.8s ease-out forwards',
      },
    },
  },
  plugins: [],
}

<div class="animate-wiggle bg-green-100 p-6 rounded">
  흔들리는 요소
</div>

<div class="animate-fadeIn bg-purple-100 p-6 rounded mt-4">
  페이드인 요소
</div>

차이점

• wiggle: 무한 반복(infinite) 애니메이션
• fadeIn: 한 번 실행(forwards) 후 멈춤

---

3. Tailwind 커스텀 애니메이션 확장

Slide-in Keyframe 애니메이션

오른쪽에서 슬라이드 인

프로젝트 요구에 맞춘 커스텀 애니메이션을 tailwind.config.js에 등록해 재사용 클래스로 관리합니다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        slideInRight: {
          '0%':   { transform: 'translateX(100%)', opacity: '0' },
          '100%': { transform: 'translateX(0)',      opacity: '1' },
        },
      },
      animation: {
        slideInRight: 'slideInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards',
      },
    },
  },
}

<div class="animate-slideInRight bg-yellow-100 p-6 rounded">
  오른쪽에서 슬라이드 인
</div>

• 맞춤 타이밍 함수(cubic-bezier)로 자연스러운 움직임
• forwards로 최종 상태 유지

---

4. 인터랙션 기반 애니메이션 적용

스크롤 인터랙션 애니메이션

스크롤하여 보이면 나타나는 요소

사용자 이벤트(스크롤, 포커스 등)에 따라 애니메이션을 제어하면 UX가 풍부해집니다. Tailwind만으론 제한적이므로 JavaScript나 Intersection Observer API를 활용합니다.

<!-- HTML -->
<div id="animateMe" class="opacity-0 transform translate-y-10 transition-all duration-700">
  스크롤 시 나타나는 요소
</div>

// JavaScript (예: main.js)
const el = document.getElementById('animateMe');
const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    el.classList.add('opacity-100', 'translate-y-0');
  }
}, { threshold: 0.3 });

io.observe(el);

• 초기 상태: opacity-0, translate-y-10(아래로 위치)
• 화면에 30% 보이면: opacity-100, translate-y-0 적용

---

5. 애니메이션 성능 최적화

애니메이션이 많아질수록 레이아웃, 페인트, 컴포지트 비용이 증가합니다. GPU 가속(transform, opacity)만 사용하고, 레이아웃 변경(reflow)이 적은 프로퍼티를 선택하세요.

• 추천 프로퍼티: transform, opacity
• 비추천 프로퍼티: width, height, margin, padding 등

/* 잘못된 예시: 레이아웃 변경 유발 */
.element {
  transition: height 0.5s ease;
}

/* 올바른 예시: GPU 가속 */
.element {
  transition: transform 0.5s ease;
}

• will-change 사용
• .animate-hero { will-change: transform, opacity; }
• 브라우저 렌더링 최적화를 위해 JIT 모드와 PurgeCSS 활용

---

이제 TailwindCSS로 트랜지션 속성, 키프레임 애니메이션, 맞춤 애니메이션, 인터랙션 제어, 성능 최적화까지 심화 활용하는 방법을 모두 익혔습니다. 다음 글에서는 SVG 애니메이션과 3D 트랜스폼을 다뤄보겠습니다.