Peraturan @starting-style CSS

Definisi dan penggunaan

CSS @starting-style Peraturan ini digunakan untuk menentukan gaya asal bagi elemen sebelum elemen menerima kemaskini gaya pertama.

Ini boleh digunakan untuk mencipta kesan masuk dan keluar yang lancar bagi elemen seperti tetingkap, modal atau mana-mana elemen yang berubah daripada keadaan display: none kepada keadaan dapat dilihat.

Contoh

Contoh 1

Pakai @starting-styleMula kawalan keupayaan dengan keupayaan 0, dan turun dari atas:

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

Cuba sendiri

Contoh 2

Dipakai dalam tetingkap dan 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;
  }
}

Cuba sendiri

Tatabiada CSS

@starting-style {
  pola CSS;
}

Dukungan pelayar

Nombor di dalam tabel menunjukkan versi paling awal pengguna penuh @ atur.