Digital Transformation
CSS @starting-style (At-Rule untuk Entry Animation)
TL;DR: @starting-style adalah at-rule CSS Baseline 2024 yang mendefinisikan style awal saat elemen pertama kali muncul di DOM. Tanpa @starting-style, elemen yang muncul dari display:none atau dialog popover tidak bisa dianimasikan masuk karena browser tidak punya state "sebelum". Sekarang animasi entry murni CSS jadi mungkin tanpa JavaScript wrapper.
Apa itu @starting-style?
@starting-style memberi tahu browser style apa yang harus dipakai sebagai titik awal saat elemen pertama kali dirender atau saat berpindah dari display:none ke display:block. Sebelum aturan ini, animasi entry butuh trik JavaScript seperti requestAnimationFrame dua kali, atau wrapper library seperti Framer Motion. Sekarang cukup CSS murni.
Sintaks dasar:
dialog {
opacity: 1;
transform: translateY(0);
transition: opacity 300ms, transform 300ms;
}
@starting-style {
dialog[open] {
opacity: 0;
transform: translateY(20px);
}
}
Saat dialog dibuka, browser memulai dari state @starting-style lalu transisi ke state final.
Cara Kerja dan Use Case
@starting-style bekerja sama dengan properti transition. Browser menerapkan style di dalam @starting-style sebagai snapshot awal, lalu otomatis transisi ke style elemen normal. Use case utama mencakup dialog modal, popover, toast notification, dropdown menu, dan element yang muncul dari kondisi display:none.
| Use Case | Tanpa @starting-style | Dengan @starting-style |
|---|---|---|
| Modal entry | Butuh JS dengan double rAF | CSS murni |
| Toast notification | Library animasi 8-15 KB | 0 byte JS |
| Dropdown menu | setTimeout + class toggle | transition langsung |
Untuk konteks lebih luas tentang animasi web modern, lihat scroll-driven animations dan view-transitions-api.
Kenapa Penting?
Bagi marketer Indonesia yang fokus pada performance, @starting-style memangkas bundle JavaScript animasi. Praktik di proyek client menunjukkan penggantian Framer Motion untuk animasi entry sederhana bisa pangkas bundle 15-40 KB gzipped. Untuk personal brand portfolio dan landing page, ini terjemahan langsung ke LCP lebih cepat dan INP lebih responsif. Data Baseline menyebutkan @starting-style sudah didukung Chrome 117+, Firefox 129+, dan Safari 17.5+.
Pertanyaan Umum
Apakah @starting-style menggantikan library animasi?
Tidak sepenuhnya. Untuk animasi kompleks (chained, gesture-based, physics) library seperti Motion masih unggul. @starting-style fokus pada entry animation sederhana yang sebelumnya butuh hack.
Bagaimana fallback untuk browser lama?
@starting-style gracefully degraded. Browser yang tidak support hanya menampilkan elemen tanpa animasi entry. Tidak ada layout break atau error.