Bandingin dua tombol: pas di-hover, yang pertama langsung jeglek warna birunya berubah jadi hitam dalam 0 detik (kasar). Yang kedua warnanya pelan-pelan transisi dari biru ke hitam dalam 0.3 detik (smooth, premium feel). Beda 0.3 detik itu yang ngebedain "feel murahan" sama "feel mahal". CSS Transitions kasih kamu kekuatan bikin perubahan properti apapun jadi mulus — gratis, tanpa JavaScript.

🤔 Aturan tak tertulis UX modern. Transition durasi 150-300ms = nyaman natural. Lebih cepat = users gak ngerasain. Lebih lambat (500ms+) = ngeselin, kayak nungguin zaman dial-up. Steve Jobs dulu sangat strict soal angka ini di iOS.

Properti transition:

• transition-property — properti yang di-animasikan
• transition-duration — durasi transisi
• transition-timing-function — kurva kecepatan
• transition-delay — jeda sebelum transisi dimulai

.tombol {
  background: blue;
  color: white;
  padding: 12px 24px;
  transition: background 0.3s ease;
}

.tombol:hover {
  background: darkblue;
}

Shorthand — transition: property duration timing-function delay:

/* Transisi semua properti */
transition: all 0.3s ease;

/* Beberapa properti berbeda */
transition: background 0.3s ease, transform 0.2s ease-out;

Timing functions yang tersedia:

• ease — mulai lambat, cepat di tengah, lambat di akhir (default)
• linear — kecepatan konstan
• ease-in — mulai lambat
• ease-out — akhir lambat
• ease-in-out — lambat di awal dan akhir

Tidak semua properti bisa di-transisikan. Properti yang bisa: color, background, width, height, opacity, transform, padding, margin, dll.

🎭 Analogi sehari-hari

transition = dimmer lampu vs saklar on/off. Tanpa transition: warna lampu langsung berubah (klik on, terang). Dengan transition: meredup pelan-pelan (klik on, terang dalam 0.3 detik).

⚠️ Jebakan yang sering ditemui

• transition: all = transisi SEMUA property — performance buruk + side effect tidak terduga. Sebut spesifik: transition: opacity 0.3s, transform 0.2s.
• Tidak semua property bisa transition — display (sebelumnya), height: auto, background-image URL ganti tidak smooth.
• Animate width/height trigger reflow = lambat. Pakai transform: scale() untuk size animation.
• transition di :hover = animate masuk + keluar. Kalau cuma mau masuk, set transition di state asal.
• Durasi pendek (~150-300ms) = nyaman. > 500ms = annoying.
• prefers-reduced-motion media query — respect user yang motion-sensitive.

🎯 Properti mana yang aman di-animate (60fps)?

• Sangat cepat (GPU compositing) → transform (scale/rotate/translate) + opacity
• Lambat (trigger reflow) → width, height, top, left, margin, padding — browser harus hitung ulang layout semua elemen
• Lebih lambat lagi (trigger paint) → box-shadow, border-radius di animasi besar

Trick centering animate: alih-alih animate width: 100px → 200px, pakai transform: scale(1) → scale(2). Hasil visual sama, performa beda jauh. Aturan production: kalau animasi ngebut tiap detik (loading spinner, scroll parallax), HARUS pakai transform/opacity. Sisanya boleh width/height kalau sekali-kali.

TL;DR: Transition bikin perubahan property A → B jadi mulus (gratis tanpa JS). Format: transition: property duration timing-function delay. Sweet spot durasi 150-300ms. Pakai ease (default) buat natural feel. Hindari transition: all — sebut spesifik. Property paling smooth (60fps): transform + opacity (GPU). width/height lambat (trigger reflow). Hormati prefers-reduced-motion.