CSS: @starting-style eine neue und coole Regel

Die @starting-style-CSS-at-Regel wird verwendet, um Startwerte für Eigenschaften zu definieren, die auf einem Element festgelegt sind, von dem aus Sie einen Übergang durchführen möchten, wenn das Element seine erste Stilaktualisierung erhält, d. h. wenn ein Element zum ersten Mal auf einem zuvor geladenen Element angezeigt wird Seite.

Nehmen wir als Beispiel eine Toastnachricht. Um es dem Benutzer anzuzeigen, ändern wir seine Sichtbarkeit. Das Ergebnis ist jedoch, dass es sofort angezeigt wird. Jetzt können wir die neue @starting-style-Regel verwenden, um die Startanimation für dieses Element zu definieren.

Einige einfache Beispiele

Verwenden wir diesen Basis-HTML-Code, ein einfaches Rechteck:

.container {
  width: 10rem;
  height: 10rem;
  background-color: hotpink;  
}

Fügen Sie den ersten Hintergrundfarbübergang von Blau zu Rosa hinzu

.container {
  ...
  transition: background-color 4s; 
}

@starting-style {
  .container {
    background-color: blue;
  }
}

Fügen Sie dem vorherigen Beispiel eine Drehung hinzu

.container {
  ...
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);} 
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}

Wie auch immer, Sie verstehen es.
Animieren Sie Ihre Popups und Menüs oder erstellen Sie ein animiertes Logo,
Es ist unkompliziert.

NOTIZ

Diese Funktion ist derzeit nur begrenzt verfügbar.

Das obige ist der detaillierte Inhalt vonCSS: @starting-style eine neue und coole Regel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!