@starting-style

Définition

Règle @starting-style qui définit les styles de départ d'une transition d'entrée (display: none vers visible). Combinée à transition-behavior: allow-discrète, elle anime aussi la sortie. Baseline « Newly available » depuis août 2024.

Analogie

Comme le rideau d'un théâtre : on définit la position de départ avant qu'il ne s'ouvre en douceur.

Exemple de code

dialog[open] {
  opacity: 1;
  transition: opacity 0.3s, overlay 0.3s allow-discrete,
    display 0.3s allow-discrete;
  @starting-style { opacity: 0; }
}
dialog { opacity: 0; }

Cas d'usage

Animer l'ouverture de modales, popovers et éléments passant de display:none à visible.

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style