07. Modern DOM & Discrete Transitions

Orchestrate zero-JavaScript dialog entry transitions from display: none and isolate background accessibility trees natively.

/* Animating DOM entry from display: none */
.dialog-overlay {
  transition: opacity 0.3s ease-out, display 0.3s allow-discrete;
  opacity: 1;
}

@starting-style {
  .dialog-overlay {
    opacity: 0;
  }
}

/* Background Isolation with inert */
[inert] {
  pointer-events: none;
  user-select: none;
}

Core Advantages

• @starting-style: Animates element entry from display: none without JavaScript animation timers.
• inert Attribute: Removes background elements from focus and accessibility trees while overlays are active.
• Hardware Transforms: GPU-composited 3D matrix rotations driven by reactive CSS tokens.