Tailwind CSS v4 고급 — 애니메이션과 트랜지션 마스터

커스텀 애니메이션

@theme {
  --animate-slide-in: slide-in 0.3s ease-out;
  --animate-bounce-in: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes slide-in {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes bounce-in {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

사용

<div class="animate-slide-in">슬라이드 인</div>
<div class="transition-all duration-300 hover:scale-105 hover:shadow-lg">
  호버 효과
</div>