Properti Animation

Anatomi properti animation

.element {
  animation-name: memantul;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: running;
}

Shorthand (urutan fleksibel kecuali durasi harus sebelum delay):

.element {
  animation: memantul 0.6s ease-in-out 0.2s 3 alternate both;
}

iteration-count dan direction

/* Berputar 3 kali lalu berhenti */
.sekali { animation: putar 1s linear 3; }

/* Bolak-balik terus */
.bola {
  animation: memantul 0.5s ease-in-out infinite alternate;
}

alternate membuat animasi jalan maju lalu mundur (0% ke 100% ke 0%), sempurna untuk pantulan tanpa perlu keyframes bolak-balik manual. alternate-reverse mulai dari mundur dulu.

fill-mode: nasib sebelum dan sesudah

Masalah umum: animasi fade-in selesai, elemen kembali ke state awal (opacity 0) karena keyframes hanya berlaku selama animasi jalan.

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

.kartu {
  animation: muncul 0.5s ease-out;
  animation-fill-mode: forwards; /* tetap di frame TERAKHIR */
}

• none (default): kembali ke gaya normal sebelum/sesudah.
• forwards: setelah selesai, tetap di frame terakhir.
• backwards: selama delay, terapkan frame pertama.
• both: keduanya.

both adalah pilihan aman untuk animasi masuk.

play-state: jeda animasi

.spinner {
  animation: putar 1s linear infinite;
}

.wadah:hover .spinner {
  animation-play-state: paused; /* jeda saat hover */
}

Berguna untuk: jeda carousel saat hover, atau kontrol play/pause via class dari JavaScript.

Contoh: animasi berurutan (stagger)

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

.daftar li {
  opacity: 0;
  animation: muncul 0.4s ease-out forwards;
}

.daftar li:nth-child(1) { animation-delay: 0.1s; }
.daftar li:nth-child(2) { animation-delay: 0.2s; }
.daftar li:nth-child(3) { animation-delay: 0.3s; }

Item muncul satu per satu dengan delay bertingkat. Perhatikan opacity: 0 di dasar + forwards: sebelum delay, backwards dari fill-mode both/forwards... sebenarnya butuh both agar frame pertama diterapkan selama delay. Pola amannya:

.daftar li {
  animation: muncul 0.4s ease-out both;
}

Catatan teknis: hormati pengguna yang sensitif terhadap gerakan dengan @media (prefers-reduced-motion: reduce): matikan atau sederhanakan animasi non-esensial. Ini praktik aksesibilitas penting.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
  }
}

Tips profesional

• Shorthand lengkap: animation: nama durasi timing delay iteration direction fill-mode;. Hafalkan urutannya.
• animation-delay negatif (-0.5s) memulai animasi dari tengah timeline.
• Pasangkan prefers-reduced-motion pada setiap animasi non-esensial: pembeda developer profesional.

Rangkuman

Kendalikan animasi dengan iteration-count, direction (alternate untuk bolak-balik), fill-mode (forwards/both agar tidak kembali), dan play-state untuk jeda. Ingat prefers-reduced-motion.