📛 CSS Animations

Panduan lengkap CSS Animations untuk efek bergerak yang kompleks

📌 Elements

💡 Animation Fundamentals

CSS Animations memungkinkan Anda membuat animasi kompleks dengan menentukan keyframe dan properti animasi.

animations.css
/* Definisi keyframes */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Penerapan animasi */
.box {
  animation: slideIn 0.5s ease-out forwards;
  background: #9333ea;
}

/* Animasi multiple keyframes */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

📝 Penjelasan Detail:

â€ĸ @keyframes - Mendefinisikan tahapan animasi
â€ĸ animation-name - Nama keyframe yang akan digunakan
â€ĸ animation-duration - Durasi animasi (contoh: 2s)
â€ĸ animation-timing-function - Fungsi waktu (ease, linear, etc)
â€ĸ animation-iteration-count - Jumlah pengulangan (infinite untuk terus menerus)

🛠ī¸ Features

advanced-animations.css
/* Animasi dengan delay dan fill-mode */
.item {
  animation: fadeIn 0.5s ease 0.3s both;
}

/* Animasi berurutan */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

/* Animasi 3D */
@keyframes flip {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(180deg); }
}

.flip-card {
  animation: flip 0.6s ease-in-out forwards;
  transform-style: preserve-3d;
}

ℹī¸ Browser Support

CSS Animations didukung di semua browser modern (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+). Untuk IE10+, gunakan prefix -ms-.

📊 Basic Tables

animation-values.css
/* Animation Properties */
animation-name   /* Nama keyframe */
animation-duration /* Durasi (1s, 200ms) */
animation-timing-function /* Fungsi waktu */
animation-delay   /* Penundaan */
animation-iteration-count /* Jumlah */
animation-direction /* Arah */
animation-fill-mode /* Fill mode */

/* Timing Functions */
ease     /* Default */
linear   /* Konstan */
ease-in  /* Slow start */
ease-out /* Slow end */
cubic-bezier() /* Kustom */

📝 Penjelasan Detail:

â€ĸ Fill modes - Mengontrol state sebelum/sesudah animasi
â€ĸ Iteration count - Dapat berupa angka atau 'infinite'
â€ĸ Direction - normal, reverse, alternate, alternate-reverse
â€ĸ Play state - running atau paused
â€ĸ Nilai durasi umum: 300-500ms untuk interaksi, 1-3s untuk animasi panjang

🚀 Advanced Table

advanced-animations.css
/* Animasi dengan JavaScript */
element.style.animation = 'slideIn 0.5s forwards';

/* Animation events */
element.addEventListener('animationend', () => {
  console.log('Animation ended');
});

/* Animasi dengan CSS Variables */
@keyframes dynamic {
  to {
    transform: translateX(var(--distance));
  }
}

/* Animasi step */
@keyframes ticker {
  to {
    transform: translateX(-100%);
  }
}
.ticker {
  animation: ticker 10s linear infinite;
  animation-timing-function: steps(10);
}

ℹī¸ Browser Support

Animation events didukung di semua browser modern. CSS Variables dalam animasi memerlukan dukungan untuk kedua fitur tersebut.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan animasi dengan bijak untuk meningkatkan pengalaman pengguna tanpa mengorbankan performa.

best-practices.css
/* ✅ Good - Performant properties */
@keyframes goodExample {
  to {
    transform: translateX(100px) scale(1.2);
    opacity: 0.8;
  }
}

/* ❌ Avoid - Expensive properties */
@keyframes badExample {
  to {
    width: 500px;
    margin-left: 100px;
  }
}

/* ✅ Good - Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

📝 Penjelasan Detail:

â€ĸ Gunakan transform/opacity - Properti ini paling efisien untuk dianimasikan
â€ĸ Hindari animasi layout properties - width, height, margin menyebabkan reflow
â€ĸ Gunakan will-change - Untuk memberi tahu browser properti yang akan berubah
â€ĸ Hormati prefers-reduced-motion - Beberapa pengguna sensitif terhadap animasi
â€ĸ Batasi animasi simultan - Terlalu banyak animasi membebani performa