CSS @starting-style -sääntö

Määrittely ja käyttö

CSS @starting-style Säännöt määrittelevät elementin alkuperäisen tyylin ennen sen ensimmäistä tyyliä päivittävää.

Tämä voidaan käyttää luomaan pehmeitä tulo- ja poistumisliikkeitä, kun elementti siirtyy display: none -tilasta näkyvään tilaan, kuten ponnahdusikkunoihin, modaalisiin ikkunoihin tai mihin tahansa elementtiin.

Esimerkki

Esimerkki 1

Käytä @starting-styleAseta laatikkoon alkuperäinen läpinäkyvyys 0 ja laske se alaspäin:

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

Kokeile itse

Esimerkki 2

Käytetään ponnahdusikkunoissa ja dialogeissa @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;
  }
}

Kokeile itse

CSS-grammatiikka

@starting-style {
  css-deklarointi;
}

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan @ säännön selaimen version.