Animation Properties

Shorthand animation memang ringkas, tetapi delapan longhand di baliknya memberi kendali penuh: berapa lama satu siklus berlangsung, berapa kali diulang, ke arah mana berjalan, dan apa yang terjadi sebelum mulai serta setelah selesai. Ketika animasi terasa nyasar — muncul mendadak setelah jeda, lompat kembali ke awal, atau tak mau berhenti — penyebabnya hampir selalu ada pada salah satu dari delapan properti ini. Pada Chapter kita membedah semuanya satu per satu, lalu berlatih menghentikan animasi dengan animation-play-state dan menahan gaya akhir dengan animation-fill-mode.

Delapan Properti Longhand #

Tabel berikut merangkum seluruh properti animation beserta nilai awalnya:

File berikut menuliskan seluruh longhand secara eksplisit pada badge notifikasi:

/* Badge notifikasi: delapan longhand ditulis eksplisit */
.badge-notif {
  animation-name: muncul;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-delay: 0.25s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

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

Mari kita telaah keputusan pentingnya:

1. Baris 4–5 (duration: 0.4s, timing: ease-out): badge memasuki layar cepat lalu melambat — kurva ease-out dari Chapter Transition Timing bekerja sama di sini.
2. Baris 6 (animation-delay: 0.25s): siklus pertama menunggu seperempat detik. Selama masa jeda, badge menampilkan gaya dasar, bukan gaya keyframe pertama.
3. Baris 7 (animation-iteration-count: 1): animasi berjalan satu kali lalu berhenti — sesuai untuk badge yang cukup muncul sekali. Nilainya juga menerima desimal seperti 2.5 untuk siklus terakhir yang berhenti di tengah jalan.
4. Baris 9 (animation-fill-mode: forwards): setelah siklus selesai, gaya keyframe terakhir tetap dipertahankan. Tanpa baris ini, badge kembali ke gaya dasar begitu animasi berakhir.
5. Baris 12–14 (@keyframes muncul): dua properti bergerak sekaligus — opacity dan transform — dan keduanya murah dianimasikan.

Satu hal lagi yang sering disalahpahami: animation-direction mengubah arah perjalanan antar keyframe, tetapi tidak mengubah isi keyframes itu sendiri. Nilai reverse memutar urutan keyframes dari akhir ke awal, sedangkan alternate membuat siklus ganjil berjalan maju dan siklus genap berjalan mundur — inilah yang membuat spinner pada demo pulih mulus tanpa lompatan.

Hasil di Browser:

Demo memuat tiga elemen beranimasi. Badge: animation-name "muncul",
duration "0.4s", timing "ease-out", delay "0.25s", iteration-count "1",
fill-mode "forwards", play-state "running". Spinner: name "putar",
iteration-count "infinite", direction "alternate", timing "linear".
Kartu jeda: play-state "paused".

Shorthand animation dan Dua Nilai Waktu #

Aturan dua nilai waktu pada shorthand animation sama dengan transition: nilai waktu pertama adalah animation-duration, nilai kedua adalah animation-delay. Sisanya bebas urutan, dan nama keyframes biasanya ditulis paling depan:

.spinner {
  animation: putar 1.2s linear infinite alternate;
}

Deklarasi di atas setara dengan menulis animation-name: putar, animation-duration: 1.2s, animation-timing-function: linear, animation-iteration-count: infinite, dan animation-direction: alternate. Kurva linear dipilih karena spinner memutar dengan kecepatan tetap; alternate membuat arah putar bolak-balik sehingga spinner pulih mulus tanpa lompatan.

Menghentikan dan Menahan Hasil #

animation-play-state berfungsi seperti tombol jeda: nilai paused membekukan animasi pada frame saat itu, dan nilai running melanjutkannya. Pola paling umum adalah menjeda saat kursor berada di atasnya:

.galeri:hover .slide {
  animation-play-state: paused;
}

Sementara itu, animation-fill-mode mengatur gaya di luar siklus. Nilai forwards menahan keyframe terakhir setelah selesai, backwards menerapkan keyframe pertama sepanjang masa delay, dan both melakukan keduanya. Kombinasi animation-delay dengan fill-mode: backwards berguna saat beberapa elemen beranimasi berurutan: elemen menampakkan posisi awalnya sejak awal, bukan muncul mendadak saat giliran tiba.

Kurva timing tidak harus seragam di sepanjang siklus. Bila ritme tiap segmen perlu berbeda — cepat saat keluar, lembut saat kembali — tuliskan animation-timing-function di dalam keyframe tertentu; kurva tersebut berlaku hanya untuk segmen yang berangkat dari keyframe itu.

/* Badge notifikasi: delapan longhand ditulis eksplisit */
.badge-notif {
  animation-name: muncul;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-delay: 0.25s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

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