CSS @starting-style regel

Definitie en gebruik

CSS @starting-style De regel wordt gebruikt om de initiële stijl van een element te definiëren voordat het element zijn eerste stijlupdate krijgt.

Dit kan gebruikt worden om gladde in- en uitverandertransities te creëren voor elementen zoals pop-ups, modale vensters of elke element die van een status van display: none zichtbaar wordt.

Voorbeeld

Voorbeeld 1

Gebruik @starting-styleLaat de doos beginnen met een transparantie van 0 en naar beneden vallen:

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

Probeer het zelf

Voorbeeld 2

Gebruik in pop-ups en dialogen @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;
  {}
{}

Probeer het zelf

CSS-syntaxis

@starting-style {
  css-aclaring;
{}

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie weer die de @ regel volledig ondersteunt.