CSS @starting-style-Regel

Definition und Verwendung

CSS @starting-style Die Regel wird verwendet, um den initialen Stil des Elements zu definieren, bevor es sein erstes Stylisierungsupdates erhält.

Dies kann verwendet werden, um sanfte Einfahrts- und Ausfahrtsübergänge für Elemente zu erstellen, die von einem Zustand display: none in einen sichtbaren Zustand wechseln.

Beispiel

Beispiel 1

Verwenden Sie @starting-styleLassen Sie die Box mit einer Transparenz von 0 beginnen und von oben her fallen:

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

Versuchen Sie es selbst

Beispiel 2

Verwenden Sie es in Pop-up-Fenstern und Dialogen @starting-style:

#myPopover {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

Versuchen Sie es selbst

CSS-Syntax

@starting-style {
  CSS-Deklaration;
}

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browserversion dar, die diese @-Regel vollständig unterstützt.