IconVault logoIconVault
Sign in

CSS @starting-style - Interactive CSS Lab | IconVault

Learn CSS @starting-style: animate elements in from display:none with pure CSS. Compare techniques live, copy the working recipe.

All tools

CSS @starting-style

Animate elements in from display:none

5 of 5 free uses left
Live: real CSS@starting-style is Baseline new (Chrome 117+, Safari 17.5+, Firefox 129+). Toggle the techniques and feel the difference.

Technique

Entry effect

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

Live demo

Entry-animated card

Both halves animate: it glides in and glides out.

Generated CSS
.card {
  transition: opacity 400ms ease, transform 400ms ease, display 400ms;
  transition-behavior: allow-discrete;
}

@starting-style {
  .card {
    opacity: 0;
        transform: translateY(16px);
  }
}

The rule to remember

  • Entry from display: none needs transition-behavior: allow-discrete and @starting-style. One without the other does nothing useful.
  • With allow-discrete, discrete properties like display flip at the 50% mark of the transition.
  • Same recipe powers animated popover and dialog open/close, and pairs with interpolate-size: allow-keywords for height auto animations.

About this tool

IconVault's CSS @starting-style lab teaches the pure-CSS way to animate elements in from display: none. Three techniques run side by side on the same card: @starting-style alone, transition-behavior: allow-discrete alone, and both combined. You will feel the classic gotcha firsthand: @starting-style alone does nothing, allow-discrete alone animates only the exit, and only the pair gives you a smooth entry and exit.

Pick a fade, slide or scale effect, dial the duration, and copy the generated CSS. It is free and runs fully in your browser, and @starting-style is Baseline new (Chrome 117+, Safari 17.5+, Firefox 129+). The same recipe animates popovers and dialogs open and closed without a line of JavaScript.

Frequently asked questions

Popular searches

css @starting-stylestarting style csscss starting-style exampleanimate display none csscss transition display nonedisplay none to block animation csscss entry animationpure css enter animationtransition-behavior allow-discreteallow discrete csscss allow-discrete exampleanimate popover csscss popover animationdialog open animation cssanimate dialog css@starting-style browser support@starting-style not workingstarting-style allow-discretecss display transition 2026interpolate-size allow-keywordsanimate to auto height csscss discrete animationtransition display css trickscss @starting-style tutoriallearn css starting styleinteractive @starting-style democss starting style playground@starting-style mdn@starting-style caniusebaseline @starting-stylecss entry transitionelement appear animation cssfade in from display noneslide in from display none csscss transition behaviortransition-behavior css propertycss transition discrete propertiesanimate visibility cssvisibility transition csscss overlay propertypopover transition cssdialog transition css@starting-style popover examplecss @starting-style dialogentry animation no javascriptcss only modal animationdisplay none animation hackcss starting style generatorcopy paste display animation csscss starting-style fade slide scale

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 →