Animasi @keyframes

Gerak berurutan multi-langkah dengan keyframes.

Pahami konsepnya

Transisi hanya menghubungkan dua titik — animasi keyframes menulis peta jalan banyak titik. Blok @keyframes nama mendefinisikan jalurnya lewat kata from/to untuk kasus dua langkah, atau persen (0%, 50%, 100%) untuk koreografi penuh; lalu elemen menjalankannya lewat properti animation dengan nama durasi dan pengulangannya.

Properti animation punya barisan lengkap: nama, durasi, timing-function, delay, iteration-count (angka atau infinite), direction (alternate bolak-balik — trik klasik agar animasi berjalan mundur mulus tanpa lompat), fill-mode (forwards membekukan keadaan akhir), dan play-state (paused untuk jeda). Bentuk ringkasnya: animation: berdenyut 2s ease-in-out infinite alternate.

Kombinasi favorit praktik: denyut (pulse) untuk titik notifikasi live, goyang (shake) untuk form tak valid, masuk-panggung (fade + translate) untuk kartu saat halaman dibuka, dan spinner rotate infinite untuk indikator muat. Pasangan sepupu yang sering ditampilkan: bila kebutuhannya cuma dua keadaan, transisi lebih sederhana; begita butuh tiga titik atau berulang, keyframes pulanglah.

Coba contoh kode

@keyframes berdenyut {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.25); opacity: 0.7; }
  100% { transform: scale(1);    opacity: 1; }
}

.titik-live {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #e74c3c;
  animation: berdenyut 1.6s ease-in-out infinite;
}

@keyframes masuk {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kartu-masuk {
  animation: masuk 0.5s ease-out backwards;
}

Titik merah live membesar-mengecil tanpa henti lewat tiga titik koreografi; kartu berkelas kartu-masuk hadir sekali — naik 16px sambil muncul — lalu fill-mode backwards menjaga ia tersembunyi selama delay (jika ada) sebelum tampil. from/to adalah tulisan ringkas 0%/100%.

Latihan singkat

Buat tiga animasi: titik live berdenyut, kartu masuk-panggang berurutan (perbedaan animation-delay), dan ikon pemuat berputar infinite.