Transition Properties

Ketika sebuah properti CSS berubah — warna tombol berganti karena kursor berada di atasnya, panel memudar setelah tombol ditekan — browser secara bawaan menerapkan nilai baru seketika dalam satu lompatan. Transition mengubah lompatan tersebut menjadi perjalanan singkat yang berlangsung dalam durasi tertentu, sehingga antarmuka terasa mengalir alih-alih berkedip. Di CSS, satu transisi tersusun dari empat properti longhand yang semuanya dapat diringkas ke dalam satu shorthand transition. Pada Chapter ini kita membedah keempat properti tersebut, membaca urutan nilai pada shorthand, dan menutup dengan daftar properti yang dapat dianimasikan.

Empat Properti Penyusun Transisi #

Tabel berikut merangkum peran masing-masing properti beserta nilai awalnya:

Dua properti pertama paling sering ditulis, sebab tanpa transition-duration bernilai lebih dari 0s tidak ada perjalanan yang berjalan — perubahan tetap terjadi seketika. File berikut membandingkan penulisan longhand pada kartu notifikasi dengan shorthand pada tombol:

/* Transisi longhand pada kartu notifikasi */
.notifikasi {
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.notifikasi:hover {
  opacity: 0.6;
}

/* Bentuk shorthand yang setara untuk tombol */
.tombol {
  transition: transform 0.5s linear 0.1s;
}
.tombol:hover {
  transform: translateX(8px);
}

Mari kita telaah aturan di atas baris demi baris:

1. Baris 3 (transition-property: opacity): hanya opacity yang ditransisikan; perubahan properti lain pada .notifikasi tetap terjadi seketika tanpa perjalanan.
2. Baris 4 (transition-duration: 0.3s): perjalanan opacity berlangsung 0,3 detik dari nilai lama ke nilai baru.
3. Baris 5 (transition-timing-function: ease): kurva bawaan yang bergerak cepat di awal lalu melambat mendekati akhir; variasi kurva kita bahas pada Chapter Transition Timing .
4. Baris 6 (transition-delay: 0s): menuliskan nilai awal secara eksplisit; baris ini boleh dihapus tanpa mengubah hasil.
5. Baris 9–10 (:hover): saat kursor masuk, opacity menurun secara halus selama 0,3 detik; saat kursor keluar, nilai kembali dengan transisi yang sama persis.
6. Baris 14 (shorthand transition): urutan nilainya adalah property, duration, timing-function, lalu delay — hasilnya identik dengan menulis keempat longhand.

Hasil di Browser:

Lima kartu demo tampil berjajar dengan konfigurasi transisi berbeda.
Kartu A: transition-property "opacity", duration "0.3s", timing "ease",
delay "0s". Kartu B (shorthand): property "transform", duration "0.5s",
timing "linear", delay "0.1s". Kartu C: property "all", duration "0.2s".
Kartu D: property "opacity, transform" dengan durasi "0.3s, 0.6s".
Kartu E: property "display" dengan transition-behavior "allow-discrete".

Shorthand transition dan Dua Nilai Waktu #

Shorthand transition menerima daftar transisi yang dipisahkan koma. Setiap item membawa durasinya sendiri, sehingga dua properti dapat berjalan dengan ritme berbeda:

.kartu {
  transition: opacity 0.3s, transform 0.6s;
}

Aturan nilai waktu pada shorthand perlu dihafal: bila ada satu nilai waktu, nilai itu adalah duration; bila ada dua, nilai pertama adalah duration dan nilai kedua adalah delay. Nilai waktu selalu dibaca berdasarkan urutan kemunculannya, bukan berdasarkan posisinya di antara kata kunci lain.

Demo chapter ini memuat lima kartu dengan lima konfigurasi: longhand penuh, shorthand berdelay, transition-property: all, daftar dua properti dengan dua durasi, serta persiapan untuk properti display yang kita bahas di bagian penutup.

Properti yang Dapat Dianimasikan dan yang Tidak #

Tidak semua nilai dapat diperjalankan. Properti dengan nilai numerik atau warna — opacity, transform, color, background-color, width, padding, dan properti teranimasi lainnya — dapat dianimasikan karena browser dapat menghitung nilai di antara dua titik. Sebaliknya, properti diskret seperti display hanya punya dua keadaan tanpa nilai di antaranya, sehingga nilainya berpindah tiba-tiba pada titik tengah durasi.

Sejak transition-behavior: allow-discrete — fitur yang merupakan Baseline sejak 2024 — properti diskret dapat ikut ditransisikan: nilainya berpindah pada akhir durasi saat elemen menghilang, dan pada awal durasi saat elemen muncul. Pola ini biasa dipasangkan dengan @starting-style agar elemen yang baru dirender punya titik awal transisi:

.panel {
  transition: opacity 0.3s, display 0.3s allow-discrete;
}
.panel.tersembunyi {
  display: none;
  opacity: 0;
}

/* Transisi longhand pada kartu notifikasi */
.notifikasi {
  transition-property: opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.notifikasi:hover {
  opacity: 0.6;
}

/* Bentuk shorthand yang setara untuk tombol */
.tombol {
  transition: transform 0.5s linear 0.1s;
}
.tombol:hover {
  transform: translateX(8px);
}