Atur @starting-style CSS

Definisi dan penggunaan

CSS @starting-style Aturan digunakan untuk menentukan gaya awal elemen sebelum elemen menerima pembaruan gaya pertama.

Ini dapat digunakan untuk membuat efek transisi yang lancar untuk elemen seperti kotak dialog, modal, atau apapun yang berubah dari status display: none ke status terlihat.

Contoh

Contoh 1

Penggunaan @starting-styleJadikan kotak mulai dengan kecerahan 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;
  }
}

Coba sendiri

Contoh 2

Penggunaan dalam kotak dialog 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;
  }
}

Coba sendiri

Sintaksis CSS

@starting-style {
  deklarasi css;
}

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang sepenuhnya mendukung @ aturan ini.