Efek Hover dan Focus

Semua bahan sudah ada: transition dengan empat longhand-nya, transform yang murah dihitung browser, dan animation yang bisa berulang sendiri. Kini saatnya menyusunnya menjadi resep. Chapter ini membedah empat efek yang muncul di hampir setiap antarmuka — kartu yang terangkat, gambar yang membesar dalam bingkainya, garis bawah yang berlari, dan cincin fokus yang berdenyut halus — lalu menutup dengan aturan performa yang menentukan properti mana yang layak dianimasikan dan mana yang sebaiknya ditinggalkan.

Resep 1: Kartu Terangkat #

css
.kartu-produk {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.kartu-produk:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgb(13 59 42 / 0.16);
}

Bayangan adalah bagian yang menjual kesan angkat — translasi tanpa bayangan hanya tampak seperti kotak yang bergeser.

Perhatikan transition ditulis pada keadaan dasar, bukan di dalam :hover — kebiasaan yang sudah kita pegang sejak chapter transition-property agar gerakan berjalan dua arah dengan tempo yang sama.

Resep 2: Zoom Gambar dalam Bingkai #

Gambar yang membesar saat disorot adalah pola klasik galeri produk. Kuncinya satu: bungkus gambar dengan elemen ber-overflow: hidden agar pembesaran terpotong rapi di tepi bingkai:

css
.bingkai-foto {
  overflow: hidden;
  border-radius: 12px;
}

.bingkai-foto .foto {
  transition: transform 0.35s ease-out;
}

.bingkai-foto:hover .foto {
  transform: scale(1.07);
}

transition sengaja dipasang pada elemen gambar, bukan pada bingkainya, karena elemen yang berubah transform haruslah elemen yang diberi transition.

Resep 3: Garis Bawah yang Berlari #

Tautan dengan garis bawah yang tumbuh saat disorot memakai pseudo-element ::after sebagai garisnya, lalu menganimasikan scaleX-nya:

css
.tautan-animasi {
  position: relative;
}

.tautan-animasi::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background-color: #1f6f54;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease-out;
}

.tautan-animasi:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

Detail arah ini lahir dari dua transform-origin: poros right pada keadaan diam membuat garis menyusut menuju kanan, sedangkan poros left pada :hover membuat garis tumbuh dari kiri.

Tiga kartu berikut masing-masing menampilkan satu resep — sorot ketiganya dan bandingkan karakter gerakannya:

Ketiganya memakai bahan yang sama — transform dan transition pada keadaan dasar; pilih efek sesuai peran komponennya, bukan sekadar yang paling ramai.

Resep 4: Cincin Fokus Berdenyut Halus #

Untuk kolom pencarian atau formulir, denyut halus pada cincin fokus menandai posisi pengguna tanpa menuntut perhatiannya. Kuncinya amplitudo kecil dan durasi panjang:

css
.input-cari:focus-visible {
  outline: none;
  border-color: #1f6f54;
  animation: denyut-cincin 1.8s ease-in-out infinite;
}

@keyframes denyut-cincin {
  0%, 100% { box-shadow: 0 0 0 4px rgb(31 111 84 / 0.18); }
  50%      { box-shadow: 0 0 0 7px rgb(31 111 84 / 0.08); }
}

outline: none di sini sah karena digantikan cincin box-shadow yang selalu terlihat — aturan yang sama dengan resep ring pada section pseudo-class; animasi berdenyutnya kembali kita tengok pada chapter penutup section ini.

Klik atau tekan Tab untuk memberi fokus pada kolom berikut — cincinnya berdenyut selama fokus bertahan:

Performa: Properti yang Murah dan yang Mahal #

Browser merender setiap frame lewat tiga tahap: menghitung ulang geometri (layout), menggambar piksel (paint), lalu menyusun lapisan-lapisan hasilnya (composite). Properti yang dianimasikan menentukan berapa banyak tahap yang harus diulang:

Properti	Tahap yang diulang	Biaya
`width`, `height`, `top`, `left`, `padding`, `font-size`	layout → paint → composite	mahal — perubahan satu elemen memaksa perhitungan ulang tetangganya
`color`, `background-color`, `box-shadow`	paint → composite	sedang — piksel digambar ulang, layout diam
`transform`, `opacity`	composite	murah — lapisan hanya digeser atau dicampur, sering ditangani jalur terpisah dari utas utama

Pedoman yang bisa kita pegang: apa pun yang bergerak, berputar, atau membesar sebaiknya lewat transform; apa pun yang muncul atau memudar lewat opacity. Animasikan width atau top hanya bila benar-benar tidak ada jalan lain — dan pada umumnya ada: translateY menggantikan top, scaleX menggantikan width.

Kesalahan Umum #

Kesalahan	Akibatnya	Perbaikan
`transition` dipasang pada bingkai, bukan gambar	zoom berpindah seketika — elemen yang berubah tidak punya transisi	pasang transition pada elemen yang menerima transform
garis bawah menganimasikan `width`	setiap frame memicu perhitungan ulang layout	animasikan `scaleX` seperti resep 3
efek hanya menyasar `:hover`	pengguna keyboard tidak melihat umpan balik apa pun	sediakan pasangan `:focus-visible` atau `:focus-within`

Ringkasan #

Empat resep — kartu terangkat, zoom dalam bingkai, garis bawah berlari, dan cincin fokus berdenyut — cukup untuk menghidupkan hampir semua komponen antarmuka, selama pedoman performanya dipegang: transform dan opacity untuk yang bergerak, properti layout dibiarkan diam. Tersisa satu pertimbangan sebelum section ini tuntas: tidak semua pengguna menginginkan gerakan sama sekali, dan CSS menyediakan cara membaca preferensi itu.