📛 CSS Transitions

Panduan lengkap CSS Transitions untuk animasi web yang halus

📌 Elements

💡 Transition Fundamentals

CSS Transitions memungkinkan Anda mengubah nilai properti secara halus selama durasi tertentu, menciptakan efek animasi yang smooth.

transitions.css
/* Transition dasar */
.box {
  width: 100px;
  height: 100px;
  background: #9333ea;
  transition: all 0.3s ease;
}

.box:hover {
  background: #a855f7;
  transform: scale(1.1);
}

/* Multiple transitions */
.button {
  transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

📝 Penjelasan Detail:

â€ĸ transition-property - Properti yang akan dianimasikan
â€ĸ transition-duration - Durasi animasi (contoh: 0.3s)
â€ĸ transition-timing-function - Fungsi waktu (ease, linear, cubic-bezier)
â€ĸ transition-delay - Penundaan sebelum animasi dimulai
â€ĸ transition - Shorthand untuk semua properti di atas

🛠ī¸ Features

advanced-transitions.css
/* Animasi transformasi 3D */
.card {
  transition: transform 0.5s ease-in-out;
}

.card:hover {
  transform: rotateY(180deg) scale(1.05);
}

/* Animasi dengan delay */
.menu-item {
  transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
  opacity: 0;
  transform: translateY(20px);
}

.menu:hover .menu-item {
  opacity: 1;
  transform: translateY(0);
}

ℹī¸ Browser Support

CSS Transitions didukung di semua browser modern (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+, Opera 12.1+). Untuk IE10+, gunakan prefix -ms-.

📊 Basic Tables

transition-values.css
/* Timing Functions */
ease        /* Default (slow start, fast, slow end) */
linear     /* Kecepatan konstan */
ease-in    /* Slow start */
ease-out   /* Slow end */
ease-in-out /* Slow start and end */
cubic-bezier() /* Fungsi kustom */

/* Common Durations */
0.2s   /* Animasi cepat */
0.3s   /* Standar */
0.5s   /* Animasi lebih lambat */
1s    /* Animasi panjang */

📝 Penjelasan Detail:

â€ĸ Timing Functions - Mengontrol percepatan animasi
â€ĸ Durations - Waktu yang dibutuhkan animasi untuk selesai
â€ĸ cubic-bezier() - Memungkinkan pembuatan kurva waktu kustom
â€ĸ steps() - Animasi dengan langkah diskrit (bukan smooth)
â€ĸ Nilai durasi antara 100ms-300ms biasanya ideal untuk interaksi pengguna

🚀 Advanced Table

advanced-transitions.css
/* Transition dengan JavaScript */
element.style.transition = 'all 0.3s ease';
element.style.backgroundColor = '#9333ea';

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

/* Animasi height: auto */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.open {
  max-height: 1000px;
}

ℹī¸ Browser Support

Transition events didukung di semua browser modern. Untuk animasi height/width, gunakan max-height/max-width atau transform: scale() untuk performa lebih baik.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan transitions untuk meningkatkan pengalaman pengguna dengan animasi yang halus dan performant.

best-practices.css
/* ✅ Good - Performant properties */
.element {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ❌ Avoid - Heavy animations */
.element {
  transition: all 0.3s ease;
  width: 100px;
}

/* ✅ Good - Will-change optimization */
.animated-element {
  will-change: transform, opacity;
}

/* ❌ Avoid - Overusing will-change */
* {
  will-change: all;
}

📝 Penjelasan Detail:

â€ĸ Animasikan properti yang ringan - transform dan opacity paling efisien
â€ĸ Hindari animasi layout properties - margin, padding, width/height
â€ĸ Gunakan will-change dengan bijak - Hanya untuk elemen yang benar-benar berubah
â€ĸ Batasi jumlah animasi - Terlalu banyak animasi membingungkan pengguna
â€ĸ Gunakan prefers-reduced-motion - Hormati preferensi pengguna