Shorthand Transition

Empat properti longhand transition sudah kita kenal satu per satu: transition-property, transition-duration, transition-timing-function, dan transition-delay. Menulis keempatnya setiap kali tentu memakan tempat. Shorthand transition merangkum semuanya dalam satu deklarasi — bentuk inilah yang paling sering ditemui di proyek nyata, dan membaca urutan nilainya dengan benar adalah keterampilan yang akan terus dipakai.

Urutan Nilai dan Aturan Pembacaannya #

Urutan nilai dalam shorthand adalah property, duration, timing-function, lalu delay:

.tombol-utama {
  transition: background-color 0.25s ease;
}

Deklarasi di atas sama persis dengan empat longhand berikut:

.tombol-utama {
  transition-property: background-color;
  transition-duration: 0.25s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

Browser membaca shorthand dengan tiga aturan:

1. Nilai waktu pertama selalu duration — transition: 0.3s sah dan berarti all selama 0.3 detik.
2. Nilai waktu kedua, bila ada, adalah delay.
3. Nilai pertama yang bukan waktu dan bukan kata kunci timing adalah nama properti.

Contoh yang menyertakan delay:

.menu-samping {
  transition: transform 0.35s ease-in-out 0.1s;
}

transform bergerak selama 0.35 detik dengan kurva ease-in-out, dimulai setelah jeda 0.1 detik.

transition: all dan Risikonya #

transition: all 0.3s ease memang menghemat ketikan, tetapi menyasar semua properti yang bisa dianimasikan — termasuk yang tidak kita maksud. Properti yang memicu perhitungan ulang layout seperti width, padding, dan font-size harus dihitung browser di setiap frame, sedangkan transform dan opacity jauh lebih murah karena tidak memicu reflow. Selain biaya render, ada risiko kesan: perubahan yang tidak direncanakan ikut bergerak dan hasilnya terasa tidak rapi.

Kebiasaan yang sehat adalah menyebut properti secara eksplisit, sekecil apa pun daftarnya.

Banyak Transisi dalam Satu Deklarasi #

Setiap item dipisah koma, dan masing-masing boleh membawa durasi, kurva, serta delay-nya sendiri:

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

Warna latar bergerak 0.2 detik, angkatan 0.15 detik, dan bayangan 0.3 detik. Bayangan yang mengejar sedikit lebih lambat daripada angkatan membuat tombol terasa punya bobot — detail kecil yang membedakan animasi biasa dari yang terasa dirancang.

Tombol berikut menerapkan deklarasi di atas — arahkan kursor, lalu tekan dan tahan untuk merasakan ketiga durasinya:

Membaca Shorthand Karya Orang Lain #

Saat menyunting stylesheet tim, kita akan sering menemui shorthand dengan kombinasi nilai yang lebih panjang. Latih mata untuk mengurainya dengan satu contoh:

/* apa artinya deklarasi berikut? */
.badge-notifikasi {
  transition: opacity 0.2s linear 0.15s;
}

Pembacaannya urut dari kiri: properti yang bergerak adalah opacity, gerakan berlangsung 0.2 detik, kurvanya linear, dan ada jeda 0.15 detik sebelum dimulai — badge menunggu sebentar, lalu memudar dengan kecepatan tetap. Kebiasaan mengurai seperti ini menghilangkan tebakan ketika menyunting kode yang bukan tulisan kita.

Resep yang Sering Dipakai #

Tabel berikut merangkum kombinasi yang layak dijadikan titik mulai:

Salin dulu, uji rasanya kemudian: angka dalam resep adalah titik awal, bukan aturan baku — produk yang berbeda menuntut tempo yang berbeda.

Kesalahan Umum #

Ringkasan #

Shorthand transition merangkum property, duration, timing-function, dan delay dalam satu deklarasi; aturan pembacaannya sederhana — waktu pertama adalah duration, waktu kedua adalah delay. Daftar eksplisit mengalahkan all, dan banyak transisi boleh berjalan sekaligus dengan nilai masing-masing. Sampai di sini, mesin transition kita lengkap. Chapter berikutnya memperkenalkan pasangan alaminya: transform — cara menggeser, memutar, dan memperbesar elemen dengan biaya render paling murah, bahan yang paling sering dianimasikan lewat transition.