Règle @starting-style CSS

Définition et utilisation

CSS @starting-style Les règles définissent le style initial de l'élément avant qu'il ne reçoive sa première mise à jour de style.

Cela peut être utilisé pour créer des transitions en douceur pour les éléments comme les pop-ups, les modaux ou tout élément qui passe de l'état display: none à visible.

Exemple

Exemple 1

Utiliser @starting-styleFaites que la boîte commence avec une transparence de 0 et tombe du haut :

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

Essayer vous-même

Exemple 2

Utilisé dans les pop-ups et les boîtes de dialogue @starting-style:

#myPopover {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

Essayer vous-même

Syntaxe CSS

@starting-style {
  Déclaration CSS;
}

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement cette règle @ pour la première fois.