Memahami CSS Animasi: Perbedaan Transition dan Animation Keyframe serta Waktu Tepat Menggunakannya

Pendahuluan

Dalam dunia pengembangan web modern, animasi menjadi elemen penting untuk meningkatkan pengalaman pengguna (user experience). CSS menyediakan dua cara utama untuk membuat animasi, yaitu transition dan animation (keyframes). Keduanya memiliki fungsi serupa — mengubah tampilan elemen secara halus — tetapi cara kerja dan penggunaannya sangat berbeda. Artikel ini akan membahas perbedaan di antara keduanya dan kapan waktu yang tepat untuk menggunakannya.

Apa Itu CSS Transition?

Transition digunakan untuk memberikan efek perubahan halus ketika suatu properti CSS berubah dari satu nilai ke nilai lain. Misalnya, saat pengguna mengarahkan kursor ke tombol (hover), warnanya bisa perlahan berubah.

Contoh sederhana:

button {
  background-color: blue;
  transition: background-color 0.5s;
}

button:hover {
  background-color: red;
}

Dalam contoh ini, perubahan warna terjadi secara halus selama 0.5 detik berkat transition.
Transition cocok digunakan untuk efek sederhana seperti:

• Hover pada tombol atau tautan.

• Perubahan warna, ukuran, atau opasitas.

• Efek fokus atau interaksi langsung dari pengguna.

Apa Itu CSS Animation (Keyframes)?

Berbeda dengan transition, animation menggunakan @keyframes untuk mengatur perubahan yang lebih kompleks dan berurutan. Anda dapat menentukan beberapa tahapan (step) perubahan, bukan hanya awal dan akhir.

Contoh penggunaan:

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.box {
  animation: fadeIn 2s ease-in-out;
}

Pada contoh ini, elemen .box akan perlahan muncul dari transparan ke tampak jelas dalam waktu 2 detik.

Animation lebih cocok digunakan untuk:

• Efek berulang (loop) seperti loading spinner.

• Gerakan kompleks (bergerak, berputar, berubah bentuk).

• Efek otomatis yang berjalan tanpa interaksi pengguna.

Perbedaan Utama