Transition Duration

transition-property memilih apa yang bergerak; transition-duration menentukan berapa lama gerakan itu berlangsung. Angka yang kita pilih di sini menentukan karakter antarmuka: umpan balik yang tepat terasa responsif, sedangkan durasi yang salah membuat perubahan terasa tersentak atau lamban. Pada chapter ini kita mempelajari satuannya, panduan memilih nilai untuk tiap situasi, dan cara memberi durasi berbeda untuk tiap properti dalam satu elemen.

Satuan Waktu dan Nilai Default #

transition-duration menerima satuan detik (s) atau milidetik (ms). Nilai 0.3s dan 300ms sama persis — pilih salah satu satuan dan gunakan konsisten dalam satu berkas.

.kartu-produk {
  transition-property: box-shadow;
  transition-duration: 300ms;
}

.kartu-produk:hover {
  box-shadow: 0 10px 20px rgb(15 40 30 / 0.2);
}

Arahkan kursor ke kartu berikut dan amati bayangannya: muncul selama 300ms saat kursor masuk, mengecil dengan lama yang sama saat kursor pergi.

Nilai default transition-duration adalah 0s. Inilah alasan transisi “tidak berjalan” padahal transition-property sudah ditulis: tanpa durasi, browser menganggap gerakan berlangsung nol detik, sehingga nilai langsung berpindah tanpa tahapan apa pun. Durasi 0 berarti perpindahan instan — justru kondisi inilah yang kita ubah dengan mengisi durasi.

Panduan Memilih Durasi #

Durasi memengaruhi kesan kualitas secara langsung. Terlalu cepat, perubahan terasa seperti lompatan dan mata tidak sempat mengikutinya. Terlalu lambat, antarmuka terasa lambat merespons dan pengguna menunggu gerakan selesai sebelum bisa melanjutkan kerjanya. Rentang berikut menjadi patokan yang lazim:

Bila ragu, dua nilai ini aman untuk hampir semua antarmuka: 200ms untuk umpan balik interaksi dan 350ms untuk pergerakan elemen.

Tiga tombol berikut menjalankan efek yang sama — warna menggelap dan tombol terangkat dua piksel — dengan durasi 0.08s, 0.25s, dan 0.8s.

Ketiga tombol memakai keadaan awal dan akhir yang sama — hanya lama perjalanannya yang berbeda, sehingga perbandingannya adil; untuk interaksi rutin, durasi tengah biasanya paling nyaman.

Durasi yang Sama di Kedua Arah #

Satu durasi mengatur dua perjalanan sekaligus. Karena transition ditulis pada keadaan dasar, lama perubahan saat kursor masuk sama dengan saat kursor keluar. Kalimat “kecepatan” juga penting dipahami: elemen yang bergerak 200px selama 0.2s terasa dua kali lebih cepat daripada elemen yang bergerak 200px selama 0.4s. Jarak dan durasi bekerja berpasangan — jarak yang jauh dengan durasi pendek terasa mendadak, sedangkan jarak dekat dengan durasi panjang terasa lelet.

Durasi Berbeda untuk Tiap Properti #

Ketika transition-property berisi daftar, nilai transition-duration dipasangkan berdasarkan urutannya:

.tombol-keranjang {
  transition-property: background-color, transform, box-shadow;
  transition-duration: 0.15s, 0.2s, 0.3s;
}

background-color bergerak selama 0.15 detik, transform 0.2 detik, dan box-shadow 0.3 detik. Bila jumlah durasi lebih sedikit daripada properti, daftar durasi diulang dari awal — dua properti dengan satu nilai durasi berarti keduanya memakai nilai yang sama.

Pembagian seperti ini bukan sekadar gaya. Warna boleh bergerak cepat karena mata sensitif terhadap perubahan latar, sementara bayangan yang mengejar sedikit lebih lambat membuat pergerakan terasa memiliki kedalaman.

Kesalahan Umum #

Bila durasi perlu dicocokkan, ubah nilai waktunya secara langsung di panel Styles DevTools: perubahan berlaku seketika pada halaman, sehingga mencocokkan rasa gerakan bisa dilakukan dengan mencoba, bukan menebak angka.

Ringkasan #

transition-duration mengatur lama perubahan: satuannya s dan ms, default-nya 0s yang berarti seketika, dan panduan praktisnya 150-250ms untuk umpan balik serta 300-500ms untuk pergerakan besar. Durasi kini menjawab “berapa lama”, tetapi belum menjawab “bagaimana ritmenya”. Chapter berikutnya mengisi pertanyaan kedua lewat transition-timing-function.