@keyframes

Transition menghidupkan perpindahan antara dua keadaan yang sudah tertulis: nilai dasar di satu tempat, nilai baru di tempat lain, dan gerakan hanya terjadi saat keadaannya berubah. Banyak gerakan lain tidak sesederhana itu — indikator yang berdenyut terus, pemandu proses yang lewat tiga tahap, atau animasi pembuka yang harus berjalan begitu halaman terbuka tanpa menunggu interaksi. @keyframes menampung semua kebutuhan itu: blok aturan tempat kita mendefinisikan titik-titik perhentian animasi sendiri, lalu menjalankannya lewat property animation.

Dua Titik: from dan to #

Bentuk @keyframes paling sederhana hanya punya dua titik perhentian:

@keyframes denyut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.4;
  }
}

Mari kita uraikan:

1. @keyframes denyut — mendefinisikan animasi bernama denyut; nama inilah yang nanti dipanggil.
2. from — keadaan pada titik awal, padanan dari 0%.
3. to — keadaan pada titik akhir, padanan dari 100%.

Isinya ditulis seperti CSS biasa: property dan nilainya. Kedua titik itu opsional — titik yang tidak ditulis akan diisi browser dengan nilai yang sedang dipakai elemen saat animasi dimulai.

Persentase untuk Titik Tengah #

from dan to hanya cukup untuk dua keadaan. Begitu animasi butuh perhentian di tengah jalan, tulis persentase:

@keyframes lompat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-16px); }
  100% { transform: translateY(0); }
}

Persentase wajib berada di rentang 0% sampai 100%.

Diterapkan pada elemen, resep di atas berjalan sendiri tanpa menunggu interaksi — property animation yang memanggilnya dibahas pada bagian berikutnya:

Setiap titik boleh menganimasikan beberapa property sekaligus, dan property yang berbeda boleh punya ritme yang berbeda:

@keyframes muncul {
  0%   { opacity: 0; transform: translateY(12px); }
  60%  { opacity: 1; }
  100% { transform: translateY(0); }
}

Pada contoh ini opacity mencapai nilai penuhnya di titik 60% dan tidak ditulis lagi setelahnya, sedangkan transform terus bergerak sampai 100%. Browser menginterpolasi setiap property secara terpisah antara titik-titik yang menyebutnya — dua ritme dalam satu animasi.

Menerapkan keyframes dengan animation #

@keyframes hanya menyimpan resep; tanpa property yang memanggilnya, tidak ada yang bergerak. Pasangkan nama keyframes dengan durasi lewat animation:

.dot-status {
  animation: denyut 1.2s ease-in-out infinite;
}

Uraian nilainya:

1. denyut — nama @keyframes yang sudah didefinisikan.
2. 1.2s — lama satu putaran penuh.
3. ease-in-out — ritme gerakan di dalam satu putaran.
4. infinite — ulangi tanpa batas.

Dua animasi berikut berjalan tanpa interaksi apa pun — titik status berdenyut sebagai penanda sistem aktif, bar progres berjalan bertahap dan berulang:

Inilah perbedaan mendasarnya dengan transition: animation berjalan sendiri begitu aturannya berlaku pada elemen — shorthand animation ini masih akan kita bongkar pada chapter berikutnya. Titik status menggabungkan 0% dan 100% dalam satu blok bernilai sama sehingga denyutnya kembali mulus ke titik awal, sedangkan bar progresnya berjalan bertahap dengan jeda di tengah; keduanya menganimasikan transform dan opacity — bahan murah yang sudah kita kenal.

transition atau keyframes? #

Kapan memakai yang mana? Tabel berikut merangkum perbedaannya:

Panduan singkatnya: umpan balik yang menjawab interaksi pengguna — tombol, hover, fokus — tetap wilayah transition. Indikator proses, gerakan dekoratif yang berulang, dan cerita visual berbanyak tahap adalah wilayah keyframes.

Kesalahan Umum #

Ringkasan #

@keyframes menyimpan resep animasi sebagai titik-titik perhentian: from/to untuk dua keadaan, persentase untuk banyak keadaan, dan tiap titik boleh menganimasikan beberapa property dengan ritme berbeda. Property animation memanggil resep itu dan menjalankannya otomatis, berulang tanpa batas bila diminta. Satu baris animation yang kita pakai tadi menyembunyikan delapan properti pengatur lengkapnya — itulah bahan chapter berikutnya.