Animation Properties

Satu baris animation: denyut 1.2s ease-in-out infinite pada chapter sebelumnya baru membuka pintu. Di balik shorthand itu ada delapan properti yang mengatur hampir semua aspek animasi: berapa kali berulang, ke arah mana berputar, bagaimana keadaan awal dan akhirnya ditahan, sampai cara menghentikannya sementara. Chapter ini membongkar semuanya satu per satu, dan setelahnya kita bisa membaca shorthand animation apa pun tanpa menebak.

Delapan Properti animation #

Tiga properti pertama berperilaku persis seperti pasangan transition-nya: duration mengatur lama, timing-function memilih kurva, delay menunda mulai. Tiga berikutnya — iteration-count, direction, fill-mode — adalah kemampuan baru yang tidak dimiliki transition. Play-state melengkapi semuanya.

iteration-count dan direction #

animation-iteration-count menentukan berapa kali animasi berputar: angka bebas (termasuk pecahan seperti 2.5) atau infinite untuk tanpa batas. animation-direction mengatur arah tiap putaran:

Kombinasi infinite dan alternate menghasilkan gerakan bolak-balik yang mulus — elemen naik lalu turun tanpa pernah melompat kembali ke posisi awal. Bentuk longhand-nya seperti ini:

.bola-loncat {
  animation-name: pantul;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

fill-mode: Menahan Keadaan Awal dan Akhir #

Masalah yang hampir pasti ditemui: animasi sekali jalan yang selesai lalu melompat kembali ke tampilan aslinya. Contohnya panel yang masuk dari bawah dengan opacity: 0 — setelah animasi usai, panel kembali ke gaya dasarnya dan kelihaian geraknya terasa percuma. animation-fill-mode mengatur keadaan mana yang ditahan di luar durasi:

.panel-selamat-datang {
  animation: muncul 0.6s ease-out 0.4s both;
}

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

both dipilih karena panel ini punya delay 0.4 detik: selama jeda, panel sudah menahan keadaan 0% sehingga tidak terlihat lebih dulu; setelah gerakan selesai, keadaan akhirnya ditahan pula. Tanpa fill-mode, panel akan tampak penuh selama jeda, berkedip saat animasi dimulai, lalu melompat balik ketika usai.

play-state: Jeda yang Dikendalikan #

animation-play-state punya dua nilai: running dan paused. Pasangkan dengan pseudo-class untuk memberi kendali jeda kepada pengguna:

.papan-umum:hover {
  animation-play-state: paused;
}

Bola berikut memantul dengan alternate, dan seluruh area pantulan menjadi tombol jeda lewat animation-play-state:

Saat dijeda, bola membeku persis di titik terakhirnya — bukan mulai lagi dari awal; trik inilah yang dipakai untuk marquee berjalan, carousel otomatis, atau gerakan apa pun yang mungkin ingin diamati pembaca lebih lama.

Shorthand animation dan Urutan Nilainya #

Aturan pembacaan shorthand animation sama dengan transition: nilai waktu pertama adalah duration, nilai waktu kedua adalah delay, dan sisanya dicocokkan menurut jenisnya. Bentuk longhand pada bagian tadi diringkas menjadi:

.bola-loncat {
  animation: pantul 1s ease-in-out infinite alternate;
}

Pembacaannya: nama pantul, durasi 1 detik, kurva ease-in-out, diulang tanpa batas dengan arah bolak-balik. Dua catatan penting soal shorthand:

• Hindari nama keyframes yang bertabrakan dengan kata kunci animation seperti running, paused, atau infinite — dalam shorthand, parser bisa membacanya sebagai nilai properti lain.
• Shorthand mereset semua properti yang tidak disebut ke nilai awalnya, termasuk longhand yang ditulis sebelumnya. Letakkan shorthand lebih dulu, lalu timpa dengan longhand bila perlu — kebiasaan yang sama dengan shorthand transition.

Kesalahan Umum #

Ringkasan #

Delapan properti animation memberi kendali penuh: animation-name dan animation-duration menjalankan resep, timing-function dan delay mengatur ritme, iteration-count dan direction mengatur pengulangan, fill-mode menahan keadaan di luar durasi, dan play-state menaruh rem di tangan pembaca. Semua mesin gerakan pada section ini kini lengkap. Chapter berikutnya menyusun potongan-potongan itu menjadi resep-resep siap pakai untuk hover dan fokus.