@starting-style

Definition

Règle at qui définit les styles de départ pour les transitions d'entrée d'éléments (display: none vers visible). Permet d'animer l'apparition d'éléments sans JavaScript.

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 {
  opacity: 1; transition: opacity 0.3s;
}
@starting-style {
  dialog { opacity: 0; }
}
dialog:not([open]) { opacity: 0; }

Cas d'usage

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

Termes lies