Membuat Animasi Website Super Mulus dengan CSS Transition

Aplikasi Interaktif Tidak Harus Berat

Website yang kaku (tidak bereaksi saat disentuh) akan terlihat membosankan dan ketinggalan zaman. Banyak pemula menggunakan *library* JavaScript yang berat (seperti jQuery atau Framer Motion) hanya untuk membuat warna tombol berubah secara perlahan. Padahal, fitur bawaan CSS modern sudah lebih dari cukup!

Mengenal :hover (Efek Sentuhan Mouse)

Langkah pertama untuk membuat interaksi adalah mendeteksi kapan pengunjung mengarahkan cursor mouse mereka ke sebuah elemen. Di CSS, ini disebut pseudo-class :hover.

/* Tombol saat kondisi diam */
.btn {
  background-color: blue;
  color: white;
}

/* Tombol saat dilewati mouse */
.btn:hover {
  background-color: darkblue;
}

Kode di atas berfungsi. Sayangnya, perubahan dari warna biru terang ke biru gelap terjadi secara instan (kaku dan patah) dalam 0 detik.

Sihir Bernama CSS Transition

Untuk membuat perubahan warna tersebut perlahan-lahan (mulus), kita tambahkan properti transition ke elemen aslinya (bukan di class hover-nya!).

.btn {
  background-color: blue;
  color: white;
  /* Artinya: Berikan waktu 0.3 detik untuk merubah property apapun (all) dengan mulus */
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  background-color: darkblue;
}

Sekarang, saat tombol dilewati mouse, warna birunya akan meredup perlahan selama 0,3 detik. Sangat elegan!

Kombinasikan dengan CSS Transform (Animasi Bergerak)

Animasi terbaik bukan cuma mengubah warna, tapi juga memanipulasi bentuk fisiknya menggunakan transform. Kita bisa membuat tombolnya membesar sedikit (Zoom in) saat di-*hover* agar terlihat bisa ditekan.

.btn:hover {
  background-color: darkblue;
  /* Scale 1.1 artinya membesar 10% dari ukuran aslinya */
  transform: scale(1.1); 
}

Kamu juga bisa menggeser posisinya menggunakan transform: translateY(-5px); (membuat elemen melayang ke atas sejauh 5 pixel). Ini sangat sering dipakai untuk mempercantik kartu artikel blog (*Card*) agar "naik ke atas" saat mouse masuk ke area kartu.

Catatan Penting Performa (60 FPS)

Untuk menjaga animasi website-mu tetap mulus 60 *frame per second* bahkan di HP spesifikasi rendah, hindari menggunakan transition pada margin, padding, top/left, atau width/height. Selalu animasikan properti Opacity (Transparansi) dan Transform (Scale/Translate) karena kedua hal tersebut diolah langsung oleh Kartu Grafis (GPU) HP pengunjung, bukan oleh otak CPU-nya.