CSS/@-Regeln/@starting-style

Browserunterstützung
caniuse.com

Die CSS-@-Regel @starting-style wird verwendet, um Startwerte für Eigenschaften eines Elements festzulegen, von denen aus der Übergang erfolgen soll, wenn das Element seine erste Stilaktualisierung erhält, d. h. wenn ein Element zum ersten Mal auf einer zuvor geladenen Seite angezeigt wird.

Um unerwartetes Verhalten zu vermeiden, werden CSS-Transitions standardmäßig nicht bei der ersten Stilaktualisierung eines Elements oder bei einer Änderung seines Anzeigetyps von „none“ auf einen anderen Wert ausgelöst. Um Übergänge beim ersten Stilwechsel zu aktivieren, sind @starting-style-Regeln erforderlich. Sie liefern Startstile für Elemente, die keinen vorherigen Zustand haben, und definieren die Eigenschaftswerte, von denen aus der Übergang erfolgen soll.

@starting-style ist besonders nützlich beim Erstellen von Ein- und Ausblendungsübergängen für Elemente, die in der obersten Ebene angezeigt werden (wie Popovers und modale Dialoge), für Elemente, die zu und von display: none wechseln, sowie für Elemente, wenn sie zum ersten Mal zum DOM hinzugefügt oder daraus entfernt werden.

Siehe auch

• Navigation/Flyout-Menü

Weblinks

• CSSWG: @starting-style (CSS Transitions Module Level 2)
• MDN: CSS/ @starting-style