CSS @starting-style 规则

Pagsasaayos at paggamit

CSS @starting-style Ang patakaran ay ginagamit upang tukuyin ang unang estilo ng elemento bago ito ay nabago sa unang pagkakataon.

Ito ay maaaring gamitin upang gumawa ng mabuting pagpasok at paglabas na paglilipat para sa anumang elemento na mula sa estado ng display: none ay naging nakikita.

Eskwela

Halimbawa 1

Gamit ang @starting-styleHayaan ang kahon na magsimula sa opakidad na 0 at lumubog mula sa itaas:

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

Subukan nang personal

Halimbawa 2

Sa paggamit sa popup at dialog @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;
  }
}

Subukan nang personal

CSS pangangailangan

@starting-style {
  css pahayag;
}

Suporta ng browser

Ang numero sa talahanayan ay naglalarawan ng unang berserksiyon na ganap na sumusuporta sa @ patakaran.