Fade In / Fade Out
Auch genannt Fade
Das Element geht an seinem Platz von völlig transparent zu völlig deckend über, beim Verlassen umgekehrt.
Einsatz
Modals, Toasts und erscheinende Seiteninhalte
Varianten
- in
- out
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
Füge bei [wo] eine „Fade In / Fade Out“-Animation hinzu (auch fade genannt).
Das Element soll beim Erscheinen an seinem Platz von völlig transparent zu völlig sichtbar übergehen und beim Verschwinden genauso wieder ausblenden: sanft, ohne Bewegung oder Skalierung.
Sorge dafür, dass es nach dem Ausblenden weder anklickbar noch per Tastatur erreichbar ist, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort.Ähnliche Animationen
ABCD
Blur In
Auch genannt Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
Das Element startet stark verschwommen und wird scharf, oft während es hereingleitet oder einblendet.
Einsatz
Einblenden von Überschriften und Hero-Texten
Füge bei [wo] eine „Blur In“-Einblendanimation hinzu (auch text focus in, focus in oder blur text reveal genannt).
Der Inhalt soll stark verschwommen und transparent beginnen und dann an seinem Platz scharf werden: weich und eher langsam, ohne Bewegung.
Spiele sie nur einmal ab und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort scharf an.A
B
Klicken
Fade Through
Auch genannt Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
Der ausgehende Inhalt blendet vollständig aus, dann blendet der neue Inhalt mit leichter Skalierung ein.
Einsatz
Wechsel zwischen Zielen ohne inhaltlichen Bezug
Füge bei [wo] einen „Fade Through“-Seitenübergang hinzu (auch Fade-Through Transition oder Out-In Route Transition genannt).
Zuerst soll der ausgehende Inhalt schnell und vollständig ausblenden, danach der neue Inhalt einblenden und dabei leicht auf seine Größe anwachsen.
Lass die beiden nie überlappen und verhindere, dass sich das Layout des neuen Inhalts beim Skalieren verschiebt.A
B
Klicken
Crossfade Page Transition
Auch genannt Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
Die alte Seite blendet aus, während die neue im selben Bereich einblendet.
Einsatz
Standard-Routenwechsel
Füge bei [wo] eine „Crossfade Page Transition“ hinzu (auch Cross-Dissolve oder Fade Transition genannt).
Beim Navigieren soll die alte Seite ausblenden, während die neue gleichzeitig im selben Bereich einblendet: weich und recht schnell.
Halte beide Seiten an derselben Stelle, damit sich während der Überblendung nichts verschiebt, und setze den Fokus nach dem Wechsel auf die Hauptüberschrift der neuen Seite.Fade Up
Auch genannt Fade In Up, Reveal on Scroll
Das Element gleitet ein kurzes Stück nach oben und blendet dabei ein, als würde es an seinen Platz rücken.
Einsatz
Abschnittsüberschriften, Karten und Bilder, die beim Scrollen erscheinen
Füge bei [wo] eine „Fade Up“-Einblendanimation hinzu (auch fade-in-up oder reveal on scroll genannt).
Die Elemente sollen beim ersten Hineinscrollen leicht nach oben gleiten und dabei einblenden: dezent und schnell, ohne Nachfedern.
Spiele sie nur einmal ab und zeige die Elemente bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an.Mehr aus Entrance & Exit
A
Fade In Directional
Auch genannt Fade In Down, Fade In Left, Fade In Right
Das Element blendet ein und gleitet dabei ein kurzes Stück von einer Seite an seine endgültige Position.
Einsatz
Abschnitte und Karten, die beim Laden oder Scrollen erscheinen
Füge bei [wo] eine „Fade In Directional“-Einblendanimation hinzu (auch fade in left, fade in right oder fade in down genannt).
Das Element soll einblenden und dabei ein kurzes Stück von einer Seite an seine endgültige Position gleiten: schnell und fließend, beim Ankommen abbremsend, ohne Nachfedern.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.A
Fade Out Directional
Auch genannt Fade Out Up, Fade Out Down
Das Element blendet aus und gleitet dabei in eine Richtung davon.
Einsatz
Benachrichtigungen und Karten verwerfen
Füge bei [wo] eine „Fade Out Directional“-Ausblendanimation hinzu (auch fade out up oder fade out down genannt).
Das Element soll ausblenden und dabei ein kurzes Stück in eine Richtung gleiten: schnell, beim Hinausgehen beschleunigend.
Nimm es erst nach dem Ausblenden aus dem Layout, damit benachbarte Inhalte nicht zu früh springen, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.