Free online CSS transition-behavior generator. Generate allow-discrete transition code to enable CSS transitions on display and other discrete properties. Pure frontend processing.
The CSS transition-behavior Generator is a free online tool that helps frontend developers quickly generate transition-behavior: allow-discrete code. allow-discrete enables CSS transitions on discrete properties like display, and combined with @starting-style, achieves smooth transitions from hidden to visible states. Pure frontend processing, no server uploads.
When a modal transitions from display:none to display:block, combine allow-discrete and @starting-style for a fade-in + slide-up enter animation without JavaScript.
When a dropdown expands, display participates in the transition, combined with opacity and transform for an elegant expansion effect.
Notifications transitioning from hidden to visible use allow-discrete for smooth display transitions, combined with transform for slide-in effects.
CSS transition-behavior is part of the CSS Transitions Level 2 specification, implemented in Chrome 117 in 2023. It solves a fundamental CSS transition limitation: discrete properties like display cannot participate in transitions. In the traditional approach, display:none to display:block changes are instantaneous and cannot sync with animatable properties like opacity. allow-discrete changes this behavior: during the transition, display keeps the target value, switching only when the transition ends. Combined with @starting-style for defining the starting state of enter animations, this achieves a pure CSS "enter animation" solution that is simpler and better performing than JavaScript alternatives.
transition-behavior is a CSS property that controls whether discrete properties like display participate in transition animations. When set to allow-discrete, display can transition smoothly.
Discrete properties are CSS properties with no intermediate states between values. display:none to display:block cannot be interpolated. allow-discrete enables transitions for such properties.
With allow-discrete, display keeps the target value during the transition, switching only when the transition ends. Combined with @starting-style you can define the starting state for enter animations.
Chrome 117+, Edge 117+, Safari 17.4+ support it. Firefox is implementing. Use @supports for detection.
Not required, but recommended. allow-discrete alone only lets display participate in the transition list. With @starting-style you can define the starting state for enter animations.
Currently mainly the display property. visibility is also discrete but already has special transition handling. More may be supported in the future.