Animation & Transitions

Animasi & Transitions dengan Tailwind

Tailwind menyediakan utility untuk membuat transisi dan animasi yang halus tanpa perlu menulis CSS custom.

Transitions Dasar

<!-- Transisi semua property -->
<button class="bg-violet-600 hover:bg-violet-700 transition-colors duration-200">
  Hover Aku
</button>

<!-- Transisi multiple property -->
<div class="scale-100 hover:scale-105 shadow-md hover:shadow-xl
            transition-all duration-300 ease-in-out">
  Card yang membesar saat hover
</div>

Utility Transition

• transition — transition pada semua property umum
• transition-colors — hanya warna
• transition-transform — hanya transform
• duration-150, duration-300 — durasi dalam ms
• ease-in, ease-out, ease-in-out — timing function

Animasi Bawaan

<!-- Spin (loading spinner) -->
<svg class="animate-spin w-6 h-6 text-violet-600" ...></svg>

<!-- Pulse (skeleton loader) -->
<div class="animate-pulse bg-gray-200 rounded-lg h-4 w-32"></div>

<!-- Bounce -->
<div class="animate-bounce">⬇</div>

Animasi Custom di Config

// tailwind.config.js
theme: {
  extend: {
    keyframes: {
      fadeIn: {
        "0%": { opacity: "0", transform: "translateY(10px)" },
        "100%": { opacity: "1", transform: "translateY(0)" },
      },
    },
    animation: {
      fadeIn: "fadeIn 0.4s ease-out",
    },
  },
}