Animasi yang Performant

Animasi yang smooth berjalan di 60fps — artinya setiap frame harus selesai dalam 16.6ms. Jika lebih lambat, user melihat "jank" (gerakan patah-patah).

Aturan Utama

Hanya animate 2 properti ini untuk 60fps:

• transform — translate, scale, rotate, skew
• opacity — fade in/out

Kedua properti ini ditangani di GPU (composite layer), tidak trigger layout/paint.

Contoh Perbaikan

/* BURUK — animate left/top trigger layout */
@keyframes slideIn {
  from { left: -100px; }
  to { left: 0; }
}

/* BAIK — animate transform, composite only */
@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

will-change

Beritahu browser bahwa properti akan berubah, agar bisa mempersiapkan optimasi:

.animated-element {
  will-change: transform, opacity;
}
/* Hapus setelah animasi selesai untuk free memory */

Peringatan: Jangan overuse will-change! Terlalu banyak elemen dengan will-change justru memakan memori GPU.