CSS Transitions & Animations

1. Transition vs Animation – Perbedaan Konsep dan Penggunaan

• Transition dipakai untuk memperhalus perubahan nilai properti CSS saat terjadi perubahan status (hover, focus, active, class toggle).
  
• Animation digunakan untuk mengatur perubahan gaya secara terstruktur dan berurutan menggunakan keyframes, serta mendukung looping, delay, dan kontrol arah.
  

Kapan Menggunakan

Transition	Animation
Hover efek tombol	Animasi loader
Transisi tema (dark/light mode)	Onboarding screen, intro section
Fokus input form	Notifikasi masuk/keluar, error feedback

2. Transition – Interaksi Halus untuk Elemen UI

• Gunakan transition untuk mengatur properti spesifik, bukan all.
  
• Transisi dapat mencakup beberapa properti sekaligus, masing-masing dengan durasi dan easing yang berbeda.
  
• Kombinasi umum: transform, background-color, opacity.
  

Contoh Kode

.button {
  background-color: #0069d9;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.2s ease-in-out;
}

.button:hover {
  background-color: #0053ba;
  transform: scale(1.05);
}

3. Animation – Kontrol Multi-Stage dengan Keyframes

• Animasi memungkinkan perubahan gaya secara bertahap dengan @keyframes.
  
• Dapat dikontrol melalui properti seperti duration, delay, iteration-count, direction, dan fill-mode.
  
• Sangat cocok untuk efek fade, slide, bounce, atau loading.
  

Contoh Kode

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

.card {
  animation: fadeInUp 0.5s ease-out forwards;
}

4. Timing Function – Easing dan Custom Curve

• CSS menyediakan ease, linear, ease-in, ease-out, ease-in-out.
  
• Untuk kontrol lanjutan, gunakan cubic-bezier(x1, y1, x2, y2).
  
• Dapat menciptakan efek seperti bounce, overshoot, atau snap.
  

Contoh Kode

.alert {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1.25);
}

.alert:hover {
  transform: translateY(-10px);
}

5. Staggered Animation – Urutan Tanpa JavaScript

• Efek elemen muncul satu per satu bisa dibuat dengan mengatur animation-delay berdasarkan urutan DOM.
  
• Efektif untuk animasi list, grid item, atau navigasi.
  

Contoh Kode

<ul>
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
</ul>

.list-item {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.list-item:nth-child(1) { animation-delay: 0s; }
.list-item:nth-child(2) { animation-delay: 0.2s; }
.list-item:nth-child(3) { animation-delay: 0.4s; }

6. Skeleton Loader – Efek Shimmer

• Simulasi loading data dengan animasi background gradient.
  
• Memberi kesan cepat dan responsif saat data belum tampil.
  

Contoh Kode

.skeleton {
  width: 100%;
  height: 16px;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );

  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

7. Performa – Properti yang Aman dan Efisien

• Gunakan properti yang tidak memicu reflow seperti transform dan opacity.
  
• Hindari top, left, width, height karena dapat memperlambat render.
  

Perbandingan

/* Buruk: menyebabkan layout shift */
.bad:hover {
  top: 10px;
}

/* Baik: menggunakan GPU tanpa reflow */
.good:hover {
  transform: translateY(10px);
}

8. Aksesibilitas – Menghormati Reduced Motion

• Beberapa pengguna memiliki gangguan vestibular dan lebih memilih animasi dimatikan.
  
• Gunakan media query prefers-reduced-motion untuk mengakomodasi ini.
  

Contoh Kode

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

9. Dark Mode Transition

• Gunakan transisi antar warna untuk perubahan tema yang mulus.
  
• Pastikan properti seperti background-color dan color ditransisikan.
  

Contoh Kode

body {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark {
  background-color: #121212;
  color: #f0f0f0;
}

// Toggle tema
document.getElementById('toggle').onclick = () => {
  document.body.classList.toggle('dark');
};

10. Best Practices Checklist

• Gunakan transform dan opacity untuk performa tinggi.
  
• Hindari transition: all untuk menjaga efisiensi dan kontrol.
  
• Gunakan animation-fill-mode: forwards bila ingin mempertahankan state akhir animasi.
  
• Pastikan konsistensi durasi dan easing dalam design system.
  
• Hormati preferensi pengguna terkait motion.