Interaction Feedback

Transisi dan animasi paling terasa manfaatnya ketika antarmuka menjawab aksi pengguna: tombol yang menandakan ditekan, kerangka konten yang bergerak selagi data dimuat, dan notifikasi yang masuk dengan tenang. Tanpa umpan balik, pengguna menekan tombol dua kali karena tidak yakin aksinya diterima; dengan umpan balik yang tepat, antarmuka terasa hidup dan dapat dipercaya. Pada Chapter ini kita menghimpun pola-pola yang telah dipelajari sepanjang Section ini menjadi resep siap pakai untuk tombol, skeleton loading, toast, dan umpan balik form.

Pola Tombol: Hover, Active, Focus #

Tiga keadaan interaksi membentuk fondasi umpan balik tombol. File berikut merangkum polanya — hover ringan, skala saat ditekan, dan cincin fokus:

/* Pola tombol: umpan balik hover, active, dan focus */
.tombol {
  background-color: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 15px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
              transform 0.12s ease-out;
}

/* Hover ringan: warna sedikit gelap + bayangan tipis */
.tombol:hover {
  background-color: rgb(2, 132, 199);
  box-shadow: 0 4px 12px rgb(2 132 199 / 35%);
}

/* Active: tombol terasa ditekan */
.tombol:active {
  transform: scale(0.96);
}

/* Focus: cincin jelas untuk navigasi keyboard */
.tombol:focus-visible {
  outline: 3px solid rgb(14, 165, 233);
  outline-offset: 2px;
}

Mari kita telaah keputusannya:

1. Baris 9–11 (transition): tiga properti ditransisikan dengan durasi pendek 0,12–0,15 detik — umpan balik harus segera, bukan diperpanjeng.
2. Baris 15–17 (:hover): perubahan warna plus bayangan tipis memberi kesan “elemen terangkat” tanpa gerakan besar.
3. Baris 21–23 (:active): skala 0.96 memberi rasan tombol tengah ditekan; karena transform murah dianimasikan, responsnya instan.
4. Baris 27–29 (:focus-visible): cincin outline tebal 3px dengan jarak 2px tampak jelas bagi pengguna keyboard, tetapi tidak muncul untuk klik tetikus.

Demo chapter ini menampilkan versi statis dari pola :active dan :focus-visible — skala 1.05 pada satu tombol dan outline penuh pada tombol lain — supaya harness dapat memeriksa nilai computed-nya.

Hasil di Browser:

Baris pertama memuat tiga tombol: tombol utama dengan background
"rgb(14, 165, 233)" dan transition-property "background-color";
tombol terskala dengan transform "matrix(1.05, 0, 0, 1.05, 0, 0)";
tombol cincin fokus dengan outline "rgb(14, 165, 233)" setebal "3px"
berjarak "2px". Di bawahnya terdapat dua batang skeleton dan sebuah
toast gelap dengan transition-property "opacity, transform".

Skeleton Loading #

Skeleton adalah blok abu-abu berbentuk konten yang menempati ruang sebelum data tiba — lebih baik daripada spinner di tengah halaman karena tata letak tidak berubah saat konten masuk. Gerakannya cukup kilau warna yang berulang:

@keyframes kilau {
  from { background-color: rgb(226, 232, 240); }
  to   { background-color: rgb(241, 245, 249); }
}
.skeleton {
  width: 220px;
  height: 14px;
  border-radius: 8px;
  animation: kilau 1.4s linear infinite alternate;
}

Pergantian background-color hanya memicu tahap paint, dan bloknya kecil, sehingga pola ini tetap hemat. Kurva linear dipilih sengaja: kilau yang berulang tanpa perlambatan terasa seperti proses yang berjalan terus, sedangkan kurva ease membuat gerakan seolah tersendat tiap ujung. Nilai alternate pada contoh membuat pergantian warna bolak-balik tanpa lompatan saat siklus kembali ke awal. Bila ingin memakai garis kilau yang bergeser (shimmer), animasikan transform pada lapisan gradien — jangan menganimasikan background-position pada blok besar.

Toast dengan @starting-style #

Toast adalah notifikasi singkat di sudut layar. Kombinasi @starting-style dengan transisi membuat toast yang baru dirender masuk secara halus tanpa JavaScript:

.toast {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@starting-style {
  .toast {
    opacity: 0;
    transform: translateY(12px);
  }
}

Elemen toast pada demo memakai pola ini: begitu halaman dimuat, toast naik 12 piksel dari bawah sambil memudar masuk selama 0,3 detik. Untuk toast yang keluar layar, cukup tambahkan class dengan opacity: 0 dan transform: translateY(12px) — transisi yang sama mengurus perpisahannya. Posisi toast sebaiknya dekat area aksi terakhir, dan bila beberapa toast tampil bersamaan, susun keduanya secara vertikal alih-alih menumpuk pada titik yang sama. Jangan lupa membungkus gerakan ini dengan prefers-reduced-motion seperti pada Chapter Motion Accessibility .

Semua pola di chapter ini berbagi satu benang merah: durasi pendek, gerakan kecil, dan properti yang murah. Umpan balik interaksi yang baik diukur dalam ratusan milidetik — cukup untuk terbaca mata, segera untuk tidak menunda aksi berikutnya.

/* Pola tombol: umpan balik hover, active, dan focus */
.tombol {
  background-color: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 15px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
              transform 0.12s ease-out;
}

/* Hover ringan: warna sedikit gelap + bayangan tipis */
.tombol:hover {
  background-color: rgb(2, 132, 199);
  box-shadow: 0 4px 12px rgb(2 132 199 / 35%);
}

/* Active: tombol terasa ditekan */
.tombol:active {
  transform: scale(0.96);
}

/* Focus: cincin jelas untuk navigasi keyboard */
.tombol:focus-visible {
  outline: 3px solid rgb(14, 165, 233);
  outline-offset: 2px;
}