Animating Entry and Exit States with CSS starting-style
One of the most persistent hurdles in modern web styling has been the inability to cleanly animate elements transitioning into or out of display: none. Because an element with display: none produces no rendered layout box in the browser's render tree, the CSS engine cannot establish a starting geometry or initial values to interpolate properties like opacity or transform. Historically, creating a fade-in or slide-in effect on newly mounted components or native dialogs required awkward JavaScript workarounds, such as forcing synchronous layout recalculations with requestAnimationFrame or sequencing classes across microtasks.
The introduction of the CSS @starting-style at-rule, combined with transition-behavior: allow-discrete, fundamentally solves this rendering dilemma. By declaring a pre-mount baseline for elements entering the DOM or promoted to the top layer, browsers can calculate a precise before-open state from which to run CSS transitions. This capability enables fluid entry and exit animations for native <dialog>, [popover], and custom components entirely within declarative stylesheets without requiring keyframes or JavaScript animation libraries.
Example
/* Enable transitions on discrete properties like display and overlay */
.notification-card {
transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
opacity: 1;
transform: translateY(0);
}
/* Establish the starting values when transitioning from display: none */
@starting-style {
.notification-card {
opacity: 0;
transform: translateY(-20px);
}
}
/* Exit state when dismissed */
.notification-card[hidden] {
opacity: 0;
transform: translateY(-20px);
display: none;
}Implementation
/**
* Fully animated native <dialog> using @starting-style and discrete transitions
*/
/* 1. Closed state by default */
dialog.animated-modal {
display: none;
opacity: 0;
transform: scale(0.92) translateY(10px);
border: 1px solid var(--border-color, #e2e8f0);
border-radius: 12px;
padding: 2rem;
max-width: 32rem;
background-color: var(--surface-bg, #ffffff);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
/* Allow discrete properties to participate in the transition timeline */
transition:
opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
overlay 0.25s allow-discrete,
display 0.25s allow-discrete;
}
/* 2. Open state (when showModal() is called on dialog) */
dialog.animated-modal[open] {
display: flex;
flex-direction: column;
gap: 1.25rem;
opacity: 1;
transform: scale(1) translateY(0);
}
/* 3. Before-open starting styles for the entry transition */
@starting-style {
dialog.animated-modal[open] {
opacity: 0;
transform: scale(0.92) translateY(10px);
}
}
/* 4. Backdrop entry and exit animation */
dialog.animated-modal::backdrop {
background-color: rgba(15, 23, 42, 0);
backdrop-filter: blur(0px);
transition:
background-color 0.25s ease,
backdrop-filter 0.25s ease,
overlay 0.25s allow-discrete,
display 0.25s allow-discrete;
}
dialog.animated-modal[open]::backdrop {
background-color: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(4px);
}
@starting-style {
dialog.animated-modal[open]::backdrop {
background-color: rgba(15, 23, 42, 0);
backdrop-filter: blur(0px);
}
}Main Point: The CSS @starting-style at-rule and transition-behavior: allow-discrete allow pure declarative transitions into and out of display: none without JavaScript timing hacks.