CSS Transitions — CSS

Bandingin dua tombol: pas di-hover, yang pertama langsung jeglek warna birunya berubah jadi hitam dalam 0 detik (kasar). Yang kedua warnanya pelan-pelan…

Transition bikin perubahan gaya berjalan pelan-pelan, bukan loncat. Contohnya tombol yang berubah warna waktu kursor ada di atasnya (keadaan ini disebut hover, ditulis :hover di CSS): tanpa transition warnanya langsung ganti, dengan transition warnanya bergeser halus dalam 0.3 detik.

🧪 Tebakan cepat: kalau transition ditulis di .box:hover, bukan di .box, waktu kursor keluar kotaknya balik dengan halus atau langsung loncat? Tebak dulu, jawabannya ada di bagian "Tulis di rule biasa, bukan di :hover".

Transition, bagian per bagian

.box {
  background: #3b82f6;
  transition: background 0.5s ease;
}

.box:hover {
  background: #ef4444;
}

.box adalah keadaan normal kotaknya: biru.
.box:hover adalah keadaan waktu kursor ada di atas kotak: merah. Bagian ini yang bikin warnanya berubah.
transition: background 0.5s ease bikin perubahan itu berjalan pelan. Nilainya tiga bagian, dipisah spasi:
- background: properti yang dianimasikan, yaitu yang berubah di :hover.
- 0.5s: lamanya, 0.5 detik. Satuannya s (detik) atau ms (milidetik), dan harus ditulis.
- ease: cara percepatannya, dijelaskan di bawah.

Hasilnya, arahkan kursor ke kotak, birunya berubah pelan-pelan jadi merah dalam setengah detik. Kursor keluar, merahnya pelan-pelan balik ke biru.

Tulis di rule biasa, bukan di `:hover`

Browser memakai transition dari keadaan yang sedang dituju. Kalau transition ada di .box, masuk ke hover dan keluar dari hover sama-sama halus. Kalau cuma ada di .box:hover, masuknya halus, tapi waktu kursor keluar, .box gak punya transition, jadi kotaknya langsung loncat balik. Itu jawaban tebakannya.

Jadi perubahannya ditulis di :hover, transition-nya ditulis di rule biasa.

Sebut properti yang benar-benar berubah

Yang berubah warna latar? Tulis transition: background 0.3s ease.
Yang berubah transform: scale(1.2)? Tulis transition: transform 0.5s ease-in-out.
Dua properti sekaligus, pisahkan dengan koma: transition: background 0.3s ease, transform 0.2s ease-out.
all menganimasikan semua properti yang berubah: transition: all 0.3s ease.

Urutannya: properti, durasi, lalu cara percepatan. Gak ada titik dua di dalam nilainya: all 0.3s ease, bukan all: 0.3s ease. background dan background-color sama-sama menganimasikan warna latar, tapi pengecek latihan membandingkan nama propertinya, jadi tulis persis yang diminta brief.

Cara percepatan (timing function)

ease: mulai pelan, cepat di tengah, pelan lagi di akhir. Ini nilai bawaan.
linear: kecepatannya sama dari awal sampai akhir.
ease-in: mulai pelan, makin lama makin cepat.
ease-out: mulai cepat, melambat di akhir.
ease-in-out: pelan di awal dan di akhir.

⚠️ Jebakan yang sering ketemu

Durasi tanpa satuan. transition: background 0.3 ease gak valid, jadi gak ada animasi sama sekali. Tulis 0.3s.
Properti yang disebut gak berubah. transition: color 0.3s gak ngaruh kalau yang berubah di :hover cuma background.
Durasi kelamaan. Sekitar 150 sampai 300ms terasa pas. Satu detik atau lebih bikin orang merasa menunggu.
Gak semua properti bisa halus. display dan height: auto biasanya langsung loncat, gak ikut ditransisikan.

💡 Paling mulus: transform dan opacity. Dua properti ini ringan buat browser. Menganimasikan width, height atau margin bikin browser menghitung ulang layout di setiap langkah, jadi bisa tersendat.

TL;DR: transition: properti durasi timing bikin perubahan gaya berjalan pelan, misalnya transition: background 0.3s ease. Tulis di rule biasa (.box), bukan di .box:hover, biar masuk dan keluarnya sama-sama halus. Sebut properti yang benar-benar berubah, dan tulis durasi lengkap dengan s atau ms. ease bawaannya, linear kecepatannya konstan.