jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose Diskreter-Übergangs-Generator

Generiere CSS für ein- und ausblendende Elemente mit transition-behavior und @starting-style.

Tool wird geladen...

Was ist Diskreter-Übergangs-Generator?

CSS konnte traditionell nicht zwischen display: none und display: block übergehen. Die Eigenschaft transition-behavior: allow-discrete und die @starting-style-Regel ermöglichen jetzt fließende Übergänge für erscheinende und verschwindende Elemente. Dies ist essentiell für Dialoge, Popovers, Tooltips und Ausklapp-Panels.

Kurze Antwort

Discrete Transitions ermöglichen CSS-Übergänge für display:none und andere diskrete Eigenschaften, wenn ein Element erscheint oder verschwindet. Verwenden Sie @starting-style, um den Anfangszustand vor dem Erscheinen des Elements zu definieren.

Last updated: 2026-05-25

Einschränkungen

  • Discrete Transitions für display erfordern Chrome 117+ oder Safari 17.5+. Die Firefox-Unterstützung steht Anfang 2026 hinter einem Flag.
  • @starting-style ist für die Eingangsanimation erforderlich. Ohne springt das Element in seinen Endzustand, bevor der Übergang startet.
  • Discrete Transitions animieren nur Ein- und Austritt, wo sich display ändert. Zwischenzustände werden nicht unterstützt.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den Elementtyp, den Sie animieren möchten: Dialog, Popover oder Ausklapp-Panel.
  2. Legen Sie Ein- und Ausblend-Animationseigenschaften wie opacity und transform fest.
  3. Das Tool generiert die @starting-style- und transition-CSS.
  4. Kopieren Sie das CSS und wenden Sie es auf Ihr Dialog-, Popover- oder details-Element an.

Wofür du es nutzen kannst

  • Fügen Sie einem Dialog-Modal einen Einblendeffekt hinzu, wenn es geöffnet wird.
  • Erstellen Sie eine Slide-Down-Animation für Ausklapp-Panels.
  • Bauen Sie fließende Ein- und Ausblend-Animationen für Popovers.

Anwendungsfalle

Praxisbeispiele

Beispiel

Dialog-Einblendeanimation

Ein Dialog blendet sich mit opacity ein und skaliert mit @starting-style von 0,9 auf 1. Beim Schließen blendet er mit demselben Übergang wieder aus.

Beispiel

Popover-Slide-Übergang

Ein Popover gleitet von oben mit einem fließenden Übergang ein und blendet beim Schließen aus, unter Verwendung von overlay und transition-behavior: allow-discrete.

Haufige Fehler

  • transition-behavior: allow-discrete zum übergehenden Element hinzuzufügen.
  • Die overlay-Eigenschaft bei Dialog- und Popover-Übergängen nicht zu berücksichtigen.
  • Animationen zu erstellen, die zu langsam sind und Benutzer frustrieren.

Überprüfung

  1. Testen Sie die Ein- und Ausgangsübergänge in Chrome oder Safari und prüfen Sie, ob die Animation in beide Richtungen abläuft.
  2. Prüfen Sie die Browser-Konsole auf CSS-Übergangswarnungen bezüglich diskreter Eigenschaften.

FAQ

Fragen zu Diskreter-Übergangs-Generator

Was bewirkt transition-behavior: allow-discrete?

Es ermöglicht Übergänge für Eigenschaften, die normalerweise nicht übergehen können, wie display und overlay.

Benötige ich @starting-style?

Ja. Es definiert den Anfangszustand des Elements vor seinem Erscheinen, wie opacity: 0 oder transform-Werte. Ohne erscheint das Element zunächst im Endzustand.

Welche CSS-Eigenschaften sind normalerweise diskret und können nicht übergehen?

Display, overlay, content-visibility und mix-blend-mode sind Beispiele. Sie haben keine Zwischenzustände. transition-behavior: allow-discrete teilt dem Browser mit, bis zum Ende der Übergangsdauer zu warten.

Kann ich zwischen display: none und display: block übergehen?

Ja, mit transition-behavior: allow-discrete und @starting-style. Das Element blendet aus, bevor display: none angewendet wird, oder blendet ein, nachdem display: block gesetzt wurde.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren