CSS @starting-style kuralı

Tanım ve kullanım

CSS @starting-style Kural, elementin ilk stil güncellemesinden önce elementin başlangıç stilini tanımlamak için kullanılır.

Bu, pop-up kutuları, modal box'lar veya display: none durumundan görünür hale gelen herhangi bir element için pürüzsüz giriş ve çıkış geçiş efektleri oluşturmak için kullanılabilir.

Örnek

Örnek 1

Kullanarak @starting-styleKutu'nun şeffaflığı 0 ile başlayacak ve en alta doğru inecek şekilde:

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

Kişisel olarak deneyin

Örnek 2

Pop-up kutuları ve diyalog box'larında kullanılır @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;
  }
}

Kişisel olarak deneyin

CSS dilbilgisi

@starting-style {
  css beyanı;
}

Tarayıcı desteği

Tablodaki rakamlar, bu @ kuralını tam olarak destekleyen ilk tarayıcı sürümünü gösterir.