CSS @starting-style regel

Definition och användning

CSS @starting-style Regeln används för att definiera elementets initiala stil innan elementet får sin första stiluppdatering.

Detta kan användas för att skapa smidiga in- och utgångsovergångar för element som popup-fönster, modalfönster eller något som blir synligt från ett display: none tillstånd.

Exempel

Exempel 1

Använd @starting-styleLåt boxen börja med genomskinlighet 0 och falla från toppen:

.box {
  bredd: 150px;
  höjd: 150px;
  bakgrundsfärg: rosa;
  genomskinlighet: 1;
  övergång: alla 0.9s lätt in;
  @starting-style {
    genomskinlighet: 0;
    översätt: 0 -80px;
  }
}

Prova själv

Exempel 2

Använd i popup-fönster och dialogrutor @starting-style:

#myPopover {
  övergång: genomskinlighet 0.5s lätt in, skala 0.5s lätt in;
  @starting-style {
    genomskinlighet: 0;
    skala: 1.1;
  }
}
#myDialog {
  övergång: genomskinlighet 0.5s lätt in, skala 0.5s lätt in;
  @starting-style {
    genomskinlighet: 0;
    skala: 1.1;
  }
}

Prova själv

CSS-syntaks

@starting-style {
  css-uttryck;
}

Webbläsarstöd

Talen i tabellen representerar den första webbläsarversion som fullständigt stöder denna @ regel.