Mashairi ya CSS @starting-style

定义和用法

CSS @starting-style 规则用于在元素获得其第一次样式更新之前定义元素的初始样式。

Hii inaweza kutumiwa kumuea uharibifu na uharibifu wa uwanja wa uagizaji wa kina, jumba la maelezo ama kila elementi iliyotangulia hali ya display: none iweze kuwa muonekano kwa ukweli wa uharibifu na uwanja wa uharibifu wa uwanja wa uagizaji wa kina.

Mfano

Mfano 1

Tumia @starting-styleInaingia kwa uombaji wa 0 na kutoka juu hadi chini:

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

Jifunze kwa urahisi

Mfano 2

Tumia kwenye maelezo na maelezo ya kifungu @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;
  }
}

Jifunze kwa urahisi

Inayofungwa na CSS

@starting-style {
  mabegho ya css;
}

Mfumo wa kumtumiaji wa kumtaarifu

Mafanikio ya namba katika tablia zimeonyesha naagizo kwa @ tukio kuanzia naagizo kwanza waagizwa kwa kumtumika kama mtumiaji wa kwanza.