Keyframe Animations

Transition hanya menjembatani dua nilai: gaya lama dan gaya baru. Ketika perjalanan yang kita inginkan melewati lebih dari dua titik — sebuah bola bergerak ke kanan, berhenti sejenak, lalu kembali — kita membutuhkan keyframes . Aturan @keyframes menggambarkan rentetan pemberhentian (keyframe) beserta gaya di setiap pemberhentian, dan properti animation menjalankannya pada elemen. Pada Chapter ini kita membedah anatomi @keyframes, menulis perjalanan bertahap dengan persen, dan melihat sekilas shorthand animation yang akan kita urai tuntas pada Chapter berikutnya.

Anatomi @keyframes #

Bentuk paling ringkas memakai kata kunci from dan to sebagai dua ujung perjalanan. File berikut memuat tiga keyframes yang dipakai demo chapter ini:

/* Keyframes untuk lampu notifikasi */
@keyframes denyut {
  from { opacity: 1; }
  to   { opacity: 0.4; }
}
.lampu {
  animation: denyut 2s ease-in-out infinite;
}

/* Keyframes bertahap dengan persen */
@keyframes geser {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(72px); }
  100% { transform: translateX(0); }
}
.bola {
  animation-name: geser;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

/* Keyframes pergantian warna */
@keyframes warna-berganti {
  0%, 100% { background-color: rgb(14, 165, 233); }
  50%      { background-color: rgb(16, 185, 129); }
}
.kotak {
  animation: warna-berganti 4s linear infinite;
}

Mari kita telaah bagian pertamanya baris demi baris:

1. Baris 2 (@keyframes denyut): aturan keyframes diberi nama denyut. Nama ini yang dipanggil oleh animation-name atau shorthand animation — aturan keyframes sendiri belum memengaruhi elemen apa pun.
2. Baris 3–4 (from / to): from setara dengan 0% dan to setara dengan 100%. Selama dua detik, opacity berjalan dari 1 menuju 0.4.
3. Baris 7 (animation: denyut 2s ease-in-out infinite): shorthand menjalankan keyframes denyut selama 2 detik dengan kurva ease-in-out, lalu mengulangnya tanpa batas.
4. Baris 11–14 (0%, 50%, 100%): persen menandai posisi dalam satu siklus. Bola bergerak 72 piksel ke kanan pada setengah siklus, lalu kembali ke titik awal di akhir siklus.
5. Baris 24–26 (0%, 100%): dua persen yang ditulis berdampingan berbagi satu blok gaya; kotak berwarna biru di kedua ujung siklus dan hijau di tengahnya.

Hasil di Browser:

Tiga elemen beranimasi berjalan terus di halaman demo. Nilai computed
yang diperiksa harness: lampu → animation-name "denyut",
animation-duration "2s", timing "ease-in-out", iteration "infinite";
bola → animation-name "geser", duration "3s"; kotak →
animation-name "warna-berganti", duration "4s".

Perhatikan bahwa animation-name dan animation-duration terbaca stabil meskipun animasinya sedang berjalan — yang berubah setiap frame hanyalah nilai properti yang dianimasikan, seperti opacity dan transform. Sifat inilah yang dimanfaatkan harness untuk menguji animasi secara deterministik. Sifat lain yang berguna: satu aturan @keyframes dapat dipakai banyak elemen sekaligus dengan durasi, kurva, dan pengulangan yang berbeda-beda, dan aturan yang belum dipanggil elemen mana pun cukup diam tanpa memberi efek apa pun.

Persen untuk Perjalanan Bertahap #

Kekuatan utama keyframes ada pada pemberhentian di tengah jalan. Kita bebas menambahkan sebanyak mungkin persen, dan setiap properti boleh bergerak dengan pola berbeda:

@keyframes kartu-masuk {
  0%   { opacity: 0; transform: translateY(16px); }
  60%  { opacity: 1; transform: translateY(0); }
  80%  { transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.kartu {
  animation: kartu-masuk 0.6s ease-out;
}

Pada contoh di atas, kartu mencapai keadaan akhirnya pada penanda 60%, mengendap sejenak lalu tersentuh sedikit ke bawah di 80% sebelum pulih — efek “mendarat” yang sulit dibuat dengan transition biasa. Properti yang tidak disebut pada suatu keyframe akan mengambil nilai dasar elemen pada titik itu. Karena itu, pastikan properti yang ingin diperjalankan mulus tercantum di keyframe awal dan akhir.

Shorthand animation Sekilas #

Properti animation memiliki delapan longhand yang seluruhnya kita bedah pada Chapter Animation Properties . Untuk saat ini, cukup pegang dua aturan shorthand: nilai waktu pertama adalah animation-duration, nilai waktu kedua (bila ada) adalah animation-delay; dan nama keyframes harus ditulis dalam bentuk yang bukan kata kunci cadangan seperti none atau running.

.banner {
  animation: kartu-masuk 0.6s ease-out 0.2s both;
}

Deklarasi di atas menjalankan kartu-masuk selama 0,6 detik dengan kurva ease-out, menunggu jeda 0,2 detik, dan memakai fill-mode: both agar gaya keyframe pertama berlaku sejak masa jeda. Bentuk panjang maupun pendek menghasilkan animasi yang identik; pilihannya soal keterbacaan tim, bukan perilaku browser. Demo chapter ini memakai kedua bentuk — longhand untuk .bola, sisanya shorthand — supaya keduanya terbiasa di mata kita.

/* Keyframes untuk lampu notifikasi */
@keyframes denyut {
  from { opacity: 1; }
  to   { opacity: 0.4; }
}
.lampu {
  animation: denyut 2s ease-in-out infinite;
}

/* Keyframes bertahap dengan persen */
@keyframes geser {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(72px); }
  100% { transform: translateX(0); }
}
.bola {
  animation-name: geser;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

/* Keyframes pergantian warna */
@keyframes warna-berganti {
  0%, 100% { background-color: rgb(14, 165, 233); }
  50%      { background-color: rgb(16, 185, 129); }
}
.kotak {
  animation: warna-berganti 4s linear infinite;
}