IconVault logoIconVault
Sign in

CSS transition-behavior - Interactive CSS Lab | IconVault

Learn transition-behavior: allow-discrete with live side-by-side demos. Animate display and visibility transitions, copy the CSS.

All tools

CSS transition-behavior

allow-discrete: animate display and visibility

5 of 5 free uses left
Live: real CSStransition-behavior: allow-discrete is Baseline new (Chrome 117+, Safari 18+, Firefox 129+). Both panes toggle together so you can feel the difference.

Discrete property

display is the hard one: the element is removed from rendering entirely.

5 of 5 free uses left. Toggling and sliders are unlimited.

display (default)

default
display box

Without allow-discrete, display flips instantly and opacity never gets a chance to run.

display + allow-discrete

allow-discrete
display box

With allow-discrete, the discrete flip happens at the 50% mark, so opacity and transform animate around it. Watch the hide: it fades first, then display flips.

Generated CSS
.panel {
  transition: opacity 500ms ease, transform 500ms ease, display 500ms;
  transition-behavior: allow-discrete; /* the one line that changes everything */
}

/* Entry from display:none also needs a defined starting point */
@starting-style {
  .panel {
    opacity: 0;
    transform: translateY(10px);
  }
}

Rules worth remembering

  • transition-behavior: allow-discrete lets discrete properties (display, visibility) participate in transitions, flipping at 50%.
  • Exit animations work with allow-discrete alone. Entry from display: none additionally needs @starting-style for the from-values.
  • It also applies to discrete values of animatable properties, and to the new overlay property used with popovers and dialogs.

About this tool

IconVault's CSS transition-behavior lab shows what one line of CSS changes. Two panes toggle display or visibility together: the default pane flips instantly, while the allow-discrete pane fades and slides around the flip, because discrete properties now participate in the transition and change at the 50% mark. A duration slider lets you slow the whole thing down and watch it happen.

The tool generates the complete recipe including the @starting-style block that entry-from-none needs, and it is free and runs fully in your browser. transition-behavior is Baseline new (Chrome 117+, Safari 18+, Firefox 129+), and the page spells out exactly which half of the animation each piece is responsible for.

Frequently asked questions

Popular searches

css transition-behaviortransition behavior cssallow-discrete csstransition-behavior allow-discretecss allow discrete exampleanimate display none to blockcss display transitiontransition display property cssdiscrete animation csscss transition discrete valuesanimate visibility cssvisibility transition allow-discretetransition-behavior browser supporttransition-behavior caniusetransition-behavior not workingcss transition behavior tutoriallearn css transition-behaviorinteractive transition-behavior democss transition behavior playgroundallow-discrete vs starting-stylecss exit animationanimate element hide cssfade out display none csscss transition 50% discretediscrete properties css listwhich css properties are discretecss overlay propertyoverlay css popovertop layer transition cssanimate popover close cssdialog close animation csscss transition-behavior mdnbaseline transition-behaviorcss transition-behavior 2026css transitions level 2transition behavior normal vs allow-discretecss flip at 50 percentdisplay none fade out pure cssshow hide animation css onlycss transition visibility hiddencollapse transition csscontent-visibility transitioncss transition-behavior generatorcopy paste allow-discrete csscss discrete keyframes@starting-style allow-discrete combinedcss enter exit animationsallow-discrete transition example codecss transition-behavior demotransition display block animation

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →