What is Discrete Transition Generator?
CSS traditionally cannot transition between display: none and display: block. The transition-behavior: allow-discrete property and @starting-style rule now enable smooth transitions for appearing and disappearing elements. This is essential for dialogs, popovers, tooltips, and disclosure panels.
Quick answer
Discrete transitions enable CSS transitions for display:none and other discrete properties when an element enters or leaves the DOM. Use @starting-style to define the initial state before the element appears.
Limitations
- Discrete transitions for display require Chrome 117+ or Safari 17.5+. Firefox support is behind a flag as of early 2026.
- @starting-style is required for the entry animation. Without it the element snaps into its final state before starting the transition.
- Discrete transitions only animate the entry and exit where display changes. Mid-state transitions between intermediate values are not supported for discrete properties.
How to use this tool
- Choose the element type you want to animate: dialog, popover, or disclosure panel.
- Set enter and exit animation properties such as opacity and transform.
- The tool generates the @starting-style and transition CSS.
- Copy the CSS and apply it to your dialog, popover, or details element.
What you can use it for
- Add a fade-in effect to a dialog modal when it opens.
- Create a slide-down animation for disclosure panels.
- Build smooth enter and exit animations for popovers.