jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free Discrete Transition Generator

Build CSS transitions for elements that toggle display, such as dialogs, popovers, disclosure panels, and menus. Uses transition-behavior: allow-discrete and @starting-style for smooth enter and exit animations.

Loading tool...

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.

quickAnswer

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.

Last updated: 2026-05-25

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.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Choose the element type you want to animate: dialog, popover, or disclosure panel.
  2. Set enter and exit animation properties such as opacity and transform.
  3. The tool generates the @starting-style and transition CSS.
  4. 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.

Use cases

Practical examples

example

Dialog fade-in animation

A dialog fades in with opacity and scales up from 0.9 to 1 using @starting-style. On close, it fades back out using the same transition.

example

Popover slide transition

A popover slides in from the top with a smooth transition and fades out on close, using overlay and transition-behavior: allow-discrete.

Common mistakes

  • Forgetting to add transition-behavior: allow-discrete to the transitioning element.
  • Not accounting for the overlay property in dialog and popover transitions.
  • Creating animations that are too slow and frustrate users.

verification

  1. Test the entry and exit transitions in Chrome or Safari and verify the animation plays in both directions.
  2. Check the browser console for any CSS transition warnings related to discrete properties.

FAQ

Questions about Discrete Transition Generator

What does transition-behavior: allow-discrete do?

It enables transitions for properties that normally cannot be transitioned, such as display and overlay.

Do I need @starting-style?

Yes. It defines the initial state of the element before it appears, such as opacity: 0 or transform values. Without it, the element appears at its final state first.

What CSS properties are normally discrete and cannot be transitioned?

Display, overlay, content-visibility, and the mix-blend-mode to initial transition are examples of discrete properties. They have no intermediate states 閳ユ攣n element is either visible or not, block or none. The transition-behavior: allow-discrete rule tells the browser to wait until the end of the transition-duration before switching states, rather than switching instantly at the start.

Can I transition between display: none and display: block?

Yes, with transition-behavior: allow-discrete and @starting-style. Define the element in both states: @starting-style sets the initial hidden state (opacity: 0 or transform), the regular rule sets the visible state, and transition-behavior: allow-discrete makes the display switch wait until the transition finishes. The element fades out before display: none is applied, or fades in after display: block is set.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool