Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >@starting-style

@starting-style

@starting-style { <Selektor> { … } }

Stile, von denen ein transition ausgehen soll, wenn ein Element gerade erst erscheint – es wird neu in die Seite eingefügt oder wechselt aus display: none. Ein solches Element hat keinen vorherigen Wert und der Übergang würde sonst nicht laufen. Mit @starting-style lassen sich ein Dialog, ein Popup oder ein neu hinzugefügter Eintrag weich einblenden, ohne Animation in JavaScript.

Werte

  • eine eigenständige Regel – enthält ganze Regeln mit Selektoren: @starting-style { .panel { opacity: 0; } }.
  • verschachtelt – direkt in der Regel des Elements, nur mit Deklarationen: .panel { transition: opacity 0.3s; @starting-style { opacity: 0; } } (setzt Unterstützung für CSS-Verschachtelung voraus).

Beispiele

Ein neuer Listeneintrag (von JavaScript hinzugefügt) blendet sich ein und gleitet um 10 px nach oben:

.item {
  transition: opacity 0.4s, translate 0.4s;
}
@starting-style {
  .item {
    opacity: 0;
    translate: 0 10px;
  }
}

Ein mit display: none verborgenes Panel, das die Klasse .open ein- und ausblendet. Ein Übergang von display mit allow-discrete hält das Panel sichtbar, bis das Ausblenden fertig ist:

.panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s, display 0.3s allow-discrete;
}
.panel.open {
  display: block;
  opacity: 1;
}
@starting-style {
  .panel.open { opacity: 0; }
}

Ein Dialog (<dialog>, geöffnet mit showModal()), der sich ein- und ausblendet. overlay hält ihn beim Schließen über der Seite, bis der Übergang fertig ist:

dialog {
  opacity: 0;
  transition: opacity 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
dialog[open] { opacity: 1; }
@starting-style {
  dialog[open] { opacity: 0; }
}

Worauf Sie achten sollten

  • Schreiben Sie die Regel nach den gewöhnlichen Stilen des Elements oder mit einem stärkeren Selektor. @starting-style fügt keine Spezifität hinzu, derselbe später geschriebene Selektor überschreibt es also und der Übergang läuft nicht.
  • Es gilt nur für die erste Darstellung eines Elements (Einfügen in die Seite, Wechsel aus display: none), nicht für jede Änderung einer Klasse.
  • Ausblenden mit display: none braucht die Eigenschaft display mit allow-discrete in transition. Das unterstützen Chrome ab 117 und Safari ab 18; Firefox laut MDN noch nicht (Stand Oktober 2026) – dort verschwindet das Element sofort, das weiche Einblenden funktioniert aber.
  • Die Eigenschaft overlay kennt nur Chrome (ab 117). Andere Browser überspringen sie in transition und der Dialog verlässt beim Schließen sofort die oberste Ebene.
  • Browser, die die Regel nicht kennen, ignorieren sie und zeigen das Element ohne Übergang – nichts geht kaputt.

Browserunterstützung

Baseline – neu verfügbar: in allen gängigen Browsern seit August 2024; ältere Browserversionen unterstützen es nicht. Ab Version: Chrome 117, Firefox 129, Safari 17.5. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
transition
display
opacity
animation