Menguasai Transisi Tailwind CSS

Membangun antarmuka pengguna tidak sekadar tentang bagaimana sesuatu terlihat, tapi juga bagaimana sesuatu terasa. Animasi mikro dan transisi yang halus memainkan peran penting dalam menciptakan pengalaman yang natural dan responsif.

Dasar Transisi

Di Tailwind, Anda dapat mengaktifkan transisi CSS dasar menggunakan kelas transition.

Secara default, kelas transition akan menganimasikan perubahan pada properti seperti:

Warna teks (text-color)
Warna latar (bg-color)
Warna batas (border-color)
Opacity
Transformasi (skala, translasi, rotasi)

Contoh Sederhana

<button class="bg-blue-500 hover:bg-blue-600 text-white transition-colors duration-300">
  Klik Saya
</button>

Pada kode di atas, perubahan warna latar belakang dari biru terang ke biru gelap saat di-hover akan memakan waktu 300 milidetik, menciptakan efek yang jauh lebih nyaman daripada perubahan mendadak.

Kurva Easing

Selain durasi, kurva easing (timing function) menentukan bagaimana kecepatan animasi berubah dari waktu ke waktu.

ease-linear: Kecepatan konstan
ease-in: Mulai lambat, lalu cepat
ease-out: Mulai cepat, lalu melambat (sering digunakan untuk elemen yang masuk ke layar)
ease-in-out: Lambat di awal dan akhir

Untuk membuat interaksi yang terasa sangat organik, bereksperimenlah dengan kombinasi durasi yang cepat (misal duration-150) dan kurva ease-out.