Transition Delay

Ada momen ketika perubahan sebaiknya tidak dimulai seketika: daftar yang muncul satu per satu terasa lebih hidup daripada daftar yang bergerak serentak, dan tooltip yang menunggu sebentar terasa lebih tenang daripada tooltip yang muncul untuk kursor yang sekadar lewat. transition-delay mengatur waktu tunggu sebelum transisi dimulai. Digabung dengan :nth-child, properti ini membuka pola staggered yang sepenuhnya ditulis dengan CSS.

Menahan Awal Transisi #

transition-delay menerima nilai waktu seperti transition-duration. Nilai positif menunda awal gerakan:

.kartu-pengumuman {
  opacity: 0.3;
  transform: translateY(10px);
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-delay: 0.2s;
}

.kartu-pengumuman.tampil {
  opacity: 1;
  transform: translateY(0);
}

Arahkan kursor ke kartu berikut dan tahan sebentar: ia diam selama 0.5 detik pada keadaan awalnya, baru kemudian memudar dan naik selama 0.3 detik.

Selama delay berlangsung, elemen memegang nilai awalnya. Karena aturan keadaan dasar tetap berlaku saat :hover atau class lain aktif, delay yang sama dipakai pada dua arah — kecuali keadaan tersebut menimpanya dengan nilai lain. Bila arah masuk perlu ditunda tetapi arah keluar perlu seketika, atur transition-delay secara berbeda pada aturan keadaan berubahnya.

Delay Negatif: Memulai dari Tengah #

Fakta yang jarang dipakai orang: delay negatif membuat transisi tidak dimulai dari awal, melainkan dari titik yang sudah dilewati.

.sorot-berita {
  transition-property: opacity;
  transition-duration: 0.4s;
  transition-delay: -0.2s;
}

Dengan durasi 0.4 detik dan delay -0.2 detik, perubahan langsung berjalan dari setengah jalan — seolah gerakan sudah dimulai sebelum kita melihatnya. Pola ini paling sering berguna pada efek berulang; kita akan memakainya lagi ketika menyusun keyframes pada chapter-chapter animasi di bagian akhir section ini.

Stagger dengan nth-child #

Staggered berarti perubahan yang bergiliran dengan jeda tetap antar item. Pola ini murni CSS, memakai :nth-child yang kita kenal pada section Pseudo-Classes:

.item-nota {
  opacity: 0.25;
  transform: translateY(8px);
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.daftar-nota:hover .item-nota {
  opacity: 1;
  transform: translateY(0);
}

.item-nota:nth-child(2) { transition-delay: 0.05s; }
.item-nota:nth-child(3) { transition-delay: 0.1s; }
.item-nota:nth-child(4) { transition-delay: 0.15s; }
.item-nota:nth-child(5) { transition-delay: 0.2s; }

Mari kita telaah potongan di atas:

1. Keadaan dasar .item-nota — kartu mulai redup dan turun 8px; di sinilah keempat longhand transition dipasang agar berlaku dua arah.
2. .daftar-nota:hover .item-nota — satu aturan pada induk mengubah semua kartu sekaligus, dan tiap kartu bergerak dengan durasi yang sama.
3. Aturan :nth-child — hanya menambah delay, tanpa mengubah gaya visual; urutan item di markup menentukan berapa lama tunggunya.
4. Hasil akhirnya — gerakan setiap kartu identik, hanya waktu mulainya bergeser 0.05 detik per urutan sehingga muncul kesan berurutan.

Rumusnya: delay = urutan item × jeda. Item pertama tidak butuh aturan karena delay default-nya 0s; item kedua menunggu 0.05 detik, item ketiga 0.1 detik, dan seterusnya. Untuk daftar yang panjang, jeda 40-80ms per item terasa wajar — melebihi itu, item terakhir baru bergerak ketika pengguna sudah berpaling.

Lima kartu berikut menunggu dengan jeda 60ms antar urutan — arahkan kursor ke dalam kotak putus-putus untuk melihat urutannya berjalan dari kiri ke kanan:

Kesalahan Umum #

Hover Intent: Memberi Ruang Ragu #

Kursor sering hanya lewat di atas elemen tanpa niat berinteraksi — menyapu menu untuk mencapai target di sebelahnya, misalnya. Di sinilah delay kecil punya peran yang disebut hover intent: menu, tooltip, dan kartu bereaksi hanya untuk kursor yang benar-benar berhenti. Jeda 80-120ms cukup untuk memisahkan niat dari sekadar lewat, dan pengguna yang memang berniat tetap merasa responsif karena tunggunya di bawah sepersepuluh detik.

Lawan dari pola ini juga perlu diingat: delay yang panjang pada interaksi rutin membuat antarmuka terasa lambat merespons. Umpan balik utama seperti warna tombol sebaiknya tetap tanpa delay; tunda hanya gerakan yang sebaiknya menunggu kepastian.

Ringkasan #

transition-delay mengatur kapan gerakan dimulai: nilai positif menunda, nilai negatif memulai dari tengah, dan pasangan delay-urutan menghasilkan stagger murni CSS. Dengan ini, keempat properti longhand transition sudah lengkap kita bahas: property, duration, timing-function, dan delay. Chapter berikutnya merangkai semuanya menjadi satu deklarasi ringkas lewat shorthand transition.