Halo teman-teman semuanya, setelah kita mempelajari fitur dark mode di Tailwind CSS, kini saatnya kita masuk ke pembahasan yang akan membuat antarmuka kita terasa lebih hidup dan interaktif, yaitu tentang transisi dan animasi.
Dengan Tailwind CSS, kita tidak perlu menulis keyframe atau property CSS satu per satu. Cukup gunakan beberapa utility class, dan efek interaktif yang menarik bisa langsung tercipta.
1. Transisi Dasar
Untuk membuat transisi yang halus saat elemen berubah (seperti warna, ukuran, atau posisi), kita bisa menggunakan class berikut:
| Class |
Fungsi |
transition |
Menambahkan efek transisi default |
transition-all |
Transisi semua properti yang berubah |
transition-colors |
Transisi hanya pada perubahan warna |
transition-opacity |
Transisi hanya pada perubahan transparansi |
transition-transform |
Transisi perubahan transformasi (seperti scale, rotate) |
Contoh:
<button class="bg-blue-600 text-white px-4 py-2 rounded transition-colors hover:bg-blue-800">
Hover Saya
</button>
2. Durasi dan Timing
Untuk mengatur kecepatan transisi dan jenis timing-nya, gunakan class berikut:
| Class |
Fungsi |
duration-150 – duration-1000 |
Menentukan durasi dalam milidetik |
ease-in |
Transisi mulai lambat |
ease-out |
Transisi di akhir melambat |
ease-in-out |
Transisi awal dan akhir halus |
delay-75 – delay-1000 |
Menunda efek transisi (dalam milidetik) |
Contoh:
<div class="bg-gray-200 p-4 rounded transition-all duration-500 ease-in-out hover:scale-110">
Arahkan kursor untuk zoom
</div>
3. Efek Transformasi
Untuk membuat elemen berubah bentuk atau posisi saat di-hover, kita bisa menggunakan transformasi:
| Class |
Fungsi |
hover:scale-105 |
Membesarkan elemen sedikit |
hover:rotate-6 |
Memutar elemen saat hover |
hover:translate-x-2 |
Geser elemen ke kanan |
hover:skew-y-3 |
Memiringkan elemen vertikal |
Contoh:
<img src="gambar.jpg" class="w-32 transition-transform duration-300 hover:rotate-6 hover:scale-110" />
4. Opacity dan Visibility
Tailwind juga menyediakan utilitas untuk mengatur tampilan elemen berdasarkan transparansi:
| Class |
Fungsi |
opacity-0 |
Sepenuhnya transparan |
opacity-100 |
Sepenuhnya terlihat |
hover:opacity-75 |
Transparansi saat hover |
5. Animasi Bawaan
Tailwind menyediakan beberapa animasi bawaan sederhana:
| Class |
Fungsi |
animate-spin |
Memutar seperti loading spinner |
animate-ping |
Efek gelombang seperti radar |
animate-pulse |
Berkedip pelan (seperti loading) |
animate-bounce |
Melompat naik turun |
Contoh:
<div class="w-4 h-4 bg-blue-500 rounded-full animate-ping"></div>
Contoh Lengkap: Kartu Interaktif
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Transisi & Animasi Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden transition-transform hover:scale-105 duration-300">
<img src="https://via.placeholder.com/400x200" alt="Gambar" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 mb-2">Kartu Animasi</h2>
<p class="text-gray-600 mb-4">Kartu ini akan membesar saat diarahkan kursor dan membuat efek transisi halus.</p>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-800 transition-colors">
Aksi
</button>
</div>
</div>
</body>
</html>
Kesimpulan
Tailwind CSS menyediakan berbagai class untuk membuat animasi dan transisi tanpa perlu menulis CSS manual. Kita cukup menggabungkan class seperti transition, duration, ease, dan hover: untuk menciptakan efek visual yang menarik dan responsif.
Terima Kasih