Perbesar Gambar

Memahami Konsep Dasar Keyframes

Sebelum kita melompat ke kode, sangat penting untuk memahami bagaimana CSS animation bekerja di belakang layar. Animasi CSS pada dasarnya adalah transisi status elemen dari satu gaya CSS ke gaya CSS lainnya dalam rentang waktu yang telah ditentukan. Aturan @keyframes memungkinkan Anda mengontrol tahapan perantara (intermediate steps) dari sekuensi animasi tersebut. Anda bisa menentukan titik henti (waypoints) pada persentase tertentu, dari 0% (awal) hingga 100% (akhir).

Salah satu kesalahan paling umum yang dilakukan developer pemula adalah mencoba menganimasikan properti yang memicu repaints atau reflows pada browser, seperti margin, padding, atau width. Praktik terbaik (best practice) yang digunakan oleh para engineer UI/UX kelas atas adalah membatasi animasi hanya pada properti transform (seperti translate, scale, rotate) dan opacity. Browser dapat menyerahkan tugas komputasi properti-properti ini langsung ke GPU (Hardware Acceleration), sehingga animasi tidak akan lag meskipun dijalankan di perangkat berspesifikasi rendah.

Implementasi Animasi Float (Mengambang)

Mari kita buat efek "mengambang" yang elegan. Efek ini sangat cocok diaplikasikan pada gambar ilustrasi utama atau tombol Call to Action (CTA) untuk menarik perhatian pengguna tanpa terlihat terlalu agresif.

/* Definisi Keyframes untuk efek mengambang */
@keyframes smoothFloat {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px); /* Bergerak ke atas */
  }
  100% {
    transform: translateY(0px); /* Kembali ke posisi semula */
  }
}

/* Aplikasi animasi pada class element */
.element-floating {
  animation: smoothFloat 3s ease-in-out infinite;
  /* ease-in-out membuat gerakan melambat di titik puncak dan terendah */
}