Transisi halus

Ubah gaya berpindah lembut, bukan mendadak.

Pahami konsepnya

Tanpa transisi, perubahan gaya terjadi seketika: tombol hover melompat warna dalam satu frame. transition membuatnya meluncur: cukup deklarasikan pada keadaan diam, dan browser mengisi perjalanan antar dua nilai otomatis. Bentuk ringkasnya empat bagian: transition: properti durasi timing delay — misal transition: background 0.3s ease.

Properti yang boleh ditransisikan hampir semuanya yang bernilai antara (warna, ukuran, opacity, transform, box-shadow); display dan font-family tidak bisa karena tak punya "antaranya". all sebagai nama properti praktis tapi boros — sebutkan properti spesifik agar browser tidak menyiapkan animasi untuk segalanya. Durusi 150-350ms adalah zona nyaman antarmuka: lebih cepat tak terasa, lebih lambat terasa lamban.

Timing function mengubah karakter gerak: ease (bawaan, pelan-pelan-cepat-pelan), linear datar, ease-in mulai berat, ease-out mulai ringan (favorit untuk hover), dan cubic-bezier() untuk kurva buatan sendiri. Aturan emas penempatan: transisi ditulis pada keadaan DASAR elemen, bukan di :hover — di hover hanya nilainya yang berubah, agar perjalanan pulang juga halus.

Coba contoh kode

.tombol {
  background: #1ABC9C;
  color: #fff;
  padding: 10px 22px;
  border-radius: 6px;
  /* transisi di keadaan dasar */
  transition: background 0.25s ease-out, transform 0.25s ease-out;
}

.tombol:hover {
  background: #148f77;
  transform: translateY(-2px);   /* terangkat halus */
}

Transisi dideklarasikan sekali di keadaan dasar dengan dua properti berbeda durasi sama; :hover hanya mengganti nilai tujuan. Hasilnya: warna berpindah lembut dan tombol terangkat 2px dengan ease-out — dan saat kursor pergi, ia kembali turun sama halusnya karena aturannya tetap ada di keadaan dasar.

Latihan singkat

Buat kartu yang terangkat dengan bayangan tumbuh saat hover (kombinasi transform + box-shadow), lalu link yang garis bawahnya tumbuh dari tengah memakai transisi.