Was ist Diskreter-Übergangs-Generator?
Diskreter-Übergangs-Generator ist ein Browser-Tool für diese Aufgabe: Generiere CSS für ein- und ausblendende Elemente mit transition-behavior und @starting-style. Die Ausgabe bleibt lesbar, damit du sie vor dem Einbau in eine Live-Seite prüfen kannst.
Quick answer
Discrete transitions enable CSS transitions for display:none and other discrete properties when an element enters or leaves the DOM. Use @starting-style to define the initial state before the element appears.
Limitations
- Discrete transitions for display require Chrome 117+ or Safari 17.5+. Firefox support is behind a flag as of early 2026.
- @starting-style is required for the entry animation. Without it the element snaps into its final state before starting the transition.
- Discrete transitions only animate the entry and exit where display changes. Mid-state transitions between intermediate values are not supported for discrete properties.
So nutzt du dieses Tool
- Öffne das Tool und trage die relevanten Werte ein.
- Prüfe die erzeugte Ausgabe im Ergebnisfeld.
- Kopiere nur den Teil, der zu deiner Seite passt.
- Teste die Änderung im Browser, bevor du sie veröffentlichst.
Wofür du es nutzen kannst
- Wiederkehrende Publishing-Aufgaben schneller erledigen.
- Markup, CSS oder Checklisten vor einem Launch vorbereiten.
- Kleine Fehler vermeiden, die bei statischen Websites leicht übersehen werden.