CSS @starting-style regel

Definisjon og bruk

CSS @starting-style Regelen brukes til å definere elementets opprinnelige stil før elementet får sin første stiloppdatering.

Dette kan brukes til å lage jevne inngangs- og utgangsoverganger for elementer som pop-op-vinduer, modalsider eller andre elementer som går fra display: none-tilstand til synlig tilstand.

Eksempel

Eksempel 1

Bruk @starting-styleLa boksen begynne med transparens 0 og falle ned fra toppen:

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

Prøv det selv

Eksempel 2

Bruk i pop-op-vinduer og dialoger @starting-style:

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

Prøv det selv

CSS-syntaks

@starting-style {
  css-erklæring;
}

Nettleserstøtte

Tallene i tabellen viser den første nettleserversjonen som fullt ut støtter @regelen.