Transisi: Animasi Perubahan yang Mulus

Dari kaku jadi mulus

Tanpa transisi, perubahan style terjadi instan: tombol langsung ganti warna saat hover. Dengan transition, perubahan itu dianimasikan mulus selama durasi tertentu.

.tombol {
  background: #2563eb;
  transition: background 0.3s ease;
}

.tombol:hover {
  background: #1d4ed8; /* berubah mulus dalam 0.3 detik */
}

Empat komponen transition

.kartu {
  transition-property: transform, box-shadow; /* properti apa yang dianimasikan */
  transition-duration: 0.3s;                 /* berapa lama */
  transition-timing-function: ease-out;      /* kurva kecepatan */
  transition-delay: 0.1s;                    /* jeda sebelum mulai */
}

Versi shorthand (urutan: properti durasi timing delay):

.kartu {
  transition: transform 0.3s ease-out 0.1s, box-shadow 0.3s ease-out;
}

Timing function: rasa gerakannya

• linear: kecepatan konstan (terasa robotik)
• ease: mulai lambat, cepat, lalu melambat (default)
• ease-in: mulai lambat, makin cepat
• ease-out: mulai cepat, melambat (paling natural buat hover)
• ease-in-out: lambat di kedua ujung
• cubic-bezier(0.34, 1.56, 0.64, 1): kurva kustom, bisa bikin efek memantul

.tombol {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tombol:hover {
  transform: scale(1.05);
}

Nilai di atas 1 pada bezier bikin efek overshoot (sedikit kebablasan lalu balik), memberi kesan elastis.

Properti yang bisa ditransisikan

Hanya properti dengan nilai numerik atau warna yang bisa dianimasikan: opacity, transform, color, background-color, width, padding, dll.

Yang TIDAK bisa: display (none ke block), karena tidak ada "keadaan antara". Trik buat fade-in elemen: animasikan opacity + visibility.

.popup {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.popup.terbuka {
  opacity: 1;
  visibility: visible;
}

Catatan teknis: jangan mentransisikan all (transition: all 0.3s). Browser harus memantau setiap perubahan properti, boros performa dan bisa menimbulkan animasi tak terduga. Sebutkan properti yang memang mau dianimasikan satu per satu.

Contoh: kartu interaktif

.kartu {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.kartu:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Kartu terangkat saat hover: efek premium yang dipakai di mana-mana, cuma butuh 8 baris.

Rangkuman

Transition menganimasikan perubahan antar dua keadaan. Kuasai empat komponennya (properti, durasi, timing, delay), pilih timing yang natural (ease-out buat hover), sebutkan properti spesifik jangan all, dan ingat display tidak bisa ditransisikan.