Regola CSS @starting-style

Definizione e uso

CSS @starting-style La regola viene utilizzata per definire lo stile iniziale dell'elemento prima che l'elemento riceva il primo aggiornamento dello stile.

Questo può essere utilizzato per creare transizioni di entrata e uscita morbide per elementi come finestre di dialogo, modali o qualsiasi elemento che diventa visibile dallo stato display: none.

Esempio

Esempio 1

Usare @starting-styleFai in modo che la scatola inizi con opacità 0 e scenda dal lato superiore:

.box {
  larghezza: 150px;
  altezza: 150px;
  colore di sfondo: rosa;
  opacità: 1;
  trasformazione: tutto 0.9s ease;
  @starting-style {
    opacità: 0;
    traslazione: 0 -80px;
  }
}

Prova tu stesso

Esempio 2

Usato nelle finestre di dialogo e nelle pop-up @starting-style:

#myPopover {
  trasformazione: opacità 0.5s ease-in, scala 0.5s ease-in;
  @starting-style {
    opacità: 0;
    scala: 1.1;
  }
}
#myDialog {
  trasformazione: opacità 0.5s ease-in, scala 0.5s ease-in;
  @starting-style {
    opacità: 0;
    scala: 1.1;
  }
}

Prova tu stesso

Sintassi CSS

@starting-style {
  dichiarazione CSS;
}

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la regola @ per la prima volta.