Digital Transformation
CSS transition-behavior (Property allow-discrete)
TL;DR: CSS transition-behavior: allow-discrete memungkinkan transisi mulus pada property yang sebelumnya tidak bisa dianimasikan, terutama display dan content-visibility. Digabung dengan @starting-style, marketer Indonesia bisa hapus library animasi modal seperti Framer Motion dan pangkas bundle 30 sampai 50 KB.
Apa itu CSS transition-behavior?
CSS transition-behavior adalah property yang menentukan apakah transition boleh diterapkan ke property bertipe discrete (nilai yang tidak punya state interpolasi). Sebelum baseline Chrome 117 dan Safari 17.4, animasi display:none ke display:block selalu menghasilkan jump tanpa fade. Sekarang dengan transition-behavior: allow-discrete, browser menahan perubahan display sampai animasi opacity atau transform selesai. Mekanisme ini sering dipasangkan dengan CSS @starting-style untuk entry animation.
Cara Kerja
.modal {
display: none;
opacity: 0;
transition: opacity 0.3s, display 0.3s allow-discrete;
}
.modal[open] { display: block; opacity: 1; }
| Property | Default | Dengan allow-discrete |
|---|---|---|
| display | tidak transisi | transisi mulus |
| content-visibility | tidak transisi | transisi mulus |
| visibility | sudah transisi | tetap sama |
Kenapa Penting?
Property ini menyatukan ekosistem [Popover API](/glosarium/css-popover-api) dan modal native menjadi pengalaman animasi yang konsisten tanpa JavaScript. Dari pengalaman Vito Atmo memigrasikan modal konsultasi Yuanita Sekar, ganti Framer Motion ke kombinasi @starting-style dan transition-behavior memangkas bundle 38 KB dan menstabilkan INP di angka 110 ms per Maret 2026. Spesifikasi resmi tersedia di CSS Transitions Level 2.
Pertanyaan Umum
Apakah perlu @starting-style juga?
Untuk entry animation (elemen baru muncul), ya. transition-behavior hanya membuka kunci discrete transition. @starting-style menyediakan nilai awal yang diinterpolasi.
Browser apa saja yang sudah dukung?
Per April 2026 dukungan baseline 93 persen termasuk Chrome, Edge, Safari 17.4 plus. Firefox tracking di 124 plus.
Istilah Terkait