Frequently Asked Questions
What is CSS @starting-style and when should I use it?▼
@starting-style is a CSS at-rule that defines the initial styles of an element before its first style update. It enables smooth entry animations for elements that go from display:none to visible, such as dialogs, popovers, tooltips, and dynamically inserted DOM elements. Before @starting-style, transitioning from display:none was impossible without JavaScript workarounds.
How does @starting-style differ from @keyframes animations?▼
@starting-style works with CSS transitions rather than keyframe animations. It defines only the starting state, and the browser transitions to the element's normal computed styles. This makes it simpler for entry animations. Use @keyframes for complex multi-step animations and @starting-style for straightforward appear/enter transitions.
What does 'transition-behavior: allow-discrete' do?▼
The allow-discrete value enables transitions on discrete properties like display. Normally, display switches instantly between none and block. With allow-discrete, the browser keeps the element visible throughout the transition, allowing opacity and transform to complete smoothly. Use the shorthand display 300ms allow-discrete in the transition property.
Which browsers support @starting-style?▼
Chrome 117+, Edge 117+, Safari 17.5+, and Firefox 129+. For older browsers, elements simply appear without the entry animation, making it a safe progressive enhancement. Always test in your target browsers.