Transitions & Animations — Tailwind CSS

Transition: Transisi halus Transition properties: transition — semua property transition-colors — hanya warna transition-opacity — hanya opacity…

Transition menghaluskan perubahan. Tanpa transition, tombol yang di-hover langsung lompat dari biru ke biru tua. Dengan transition-colors duration-300, perubahannya dibagi rata selama 300 milidetik (ms), jadi warnanya bergeser pelan-pelan. Bayangin lampu kamar: saklar biasa langsung bikin terang, lampu dengan dimmer pelan-pelan makin terang sampai penuh. Transition itu dimmer-nya. Ada juga animation (animate-*): gerakan yang jalan sendiri dan berulang terus, kayak kipas angin yang terus berputar walau gak disentuh.

🧪 Tebakan cepat: tombol transition-colors duration-300 hover:bg-blue-700 hover:scale-125 di-hover. Mana yang berubah halus: warnanya, ukurannya, atau dua-duanya? Tebak dulu, jawabannya ada di bagian "Properti mana yang dihaluskan".

Transition: dari A ke B dengan halus

Ini tombol yang sama dengan yang ada di Lab:

<button class="bg-blue-500 hover:bg-blue-700 hover:scale-125 transition-colors duration-300 ease-in-out text-white px-4 py-2 rounded">
  Hover Saya
</button>

bg-blue-500 adalah keadaan A, hover:bg-blue-700 keadaan B, seperti di pelajaran hover.
hover:scale-125 membesarkan tombolnya jadi 125% waktu di-hover.
transition-colors bilang ke browser: kalau warnanya berubah, jangan lompat, haluskan.
duration-300 menentukan lamanya: 300ms, sekitar sepertiga detik.
ease-in-out menentukan iramanya: pelan di awal, cepat di tengah, pelan lagi di akhir.

Class	CSS yang dihasilkan Tailwind v4
`transition-colors`	`transition-property: color, background-color, border-color, ...`
`duration-300`	`transition-duration: 300ms;`
`ease-in-out`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`

Tiap class transition-* juga membawa durasi bawaan 150ms dan irama bawaan yang sama dengan ease-in-out. Jadi transition-colors saja sudah halus, dan duration-* atau ease-* cuma perlu ditulis kalau mau beda.

Properti mana yang dihaluskan

Class	Yang dihaluskan
`transition`	yang paling sering dipakai: warna, opacity, bayangan, transform (geser, putar, ukuran), filter
`transition-colors`	warna saja: latar, teks, border
`transition-opacity`	opacity saja
`transition-shadow`	bayangan saja
`transition-transform`	transform saja: geser, putar, ukuran
`transition-all`	semua properti yang bisa dianimasikan

Jadi di tombol tadi, yang halus cuma warnanya. transition-colors gak mencakup ukuran, jadi scale-125 lompat langsung. Itu jawaban tebakannya. Mau dua-duanya halus? Pakai transition atau transition-all.

transition-all kelihatan praktis, tapi dia ikut menghaluskan perubahan yang gak kamu niatkan, misalnya lebar atau padding. Pilih class paling sempit yang mencakup semua yang berubah.

Durasi dan irama

Angka di duration-* adalah milidetik: duration-75, duration-150, duration-300, duration-500, duration-1000, dan seterusnya. Di v4 angka apa pun boleh, misalnya duration-250. Untuk hover tombol, 150 sampai 300ms terasa pas. 1.000ms (1 detik) sudah terasa lemot.

Class	Rasanya
`ease-linear`	kecepatannya rata dari awal sampai akhir
`ease-in`	mulai pelan, makin cepat di akhir
`ease-out`	mulai cepat, melambat di akhir
`ease-in-out`	pelan, cepat, lalu pelan lagi

Animasi yang jalan sendiri: animate-*

Transition butuh pemicu, misalnya hover. Animation jalan sendiri begitu class-nya dipasang, dan berulang terus.

Class	Gerakannya	Biasa dipakai untuk
`animate-spin`	berputar satu putaran penuh tiap 1 detik	ikon loading
`animate-ping`	membesar 2 kali lipat sambil memudar	titik notifikasi
`animate-pulse`	memudar setengah lalu kembali, tiap 2 detik	skeleton yang menunggu konten
`animate-bounce`	memantul naik turun	panah "scroll ke bawah"

Spinner dari latihan:

<div id="spinner" class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"></div>

h-8 w-8: kotak 32 × 32px. <div>-nya kosong, yang kelihatan cuma border-nya.
border-4 border-blue-500: border biru 4px di keempat sisi.
rounded-full membulatkan sudutnya sepenuhnya, jadi kotaknya jadi lingkaran.
border-t-transparent bikin sisi atas border-nya transparan. Lingkarannya jadi punya celah, dan celah itu yang bikin putarannya kelihatan. Lingkaran biru utuh yang berputar kelihatan diam.
animate-spin menghasilkan animation: spin 1s linear infinite: putar penuh tiap 1 detik, kecepatan rata, selamanya.

⚠️ Jebakan yang sering ketemu

Class transition-nya kesempitan. transition-colors gak menghaluskan ukuran atau bayangan. Pilih class yang mencakup properti yang berubah.
Transition diberi awalan hover:. hover:transition-colors cuma berlaku selama di-hover: masuknya halus, tapi waktu kursor pergi tombolnya lompat balik. Tulis class transition tanpa awalan.
Animasi buat semua orang. Sebagian orang pusing melihat gerakan, dan menyalakan setelan "kurangi gerakan" di perangkatnya. motion-reduce:animate-none mematikan animasinya buat mereka.
Spinner tanpa rounded-full di latihan. Pemeriksa mengecek sudut yang bulat penuh. Tanpa rounded-full, yang berputar adalah kotak.

TL;DR: Class transition-* menghaluskan perubahan dari satu keadaan ke keadaan lain: transition-colors untuk warna, transition-transform untuk geser, putar dan ukuran, transition untuk yang paling umum, transition-all untuk semuanya. duration-300 artinya 300ms (tanpa duration-*, 150ms), dan ease-* mengatur iramanya. Tulis class transition tanpa awalan, supaya halus waktu masuk dan keluar. animate-* jalan sendiri dan berulang: animate-spin untuk loading, animate-pulse untuk skeleton, animate-ping dan animate-bounce untuk menarik perhatian.