Das Element geht an seinem Platz von völlig transparent zu völlig deckend über, beim Verlassen umgekehrt.
Einsatz
Modals, Toasts und erscheinende Seiteninhalte
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.
Das Element schrumpft aus einem großen, unscharfen, transparenten Zustand in die Schärfe wie eine Rauchwolke, beim Verlassen umgekehrt.
Einsatz
Sanftes Erscheinen von Objekten
Füge bei [wo] eine „Puff In / Puff Out“-Animation hinzu (auch puff genannt).
Beim Erscheinen soll das Element aus einem großen, unscharfen, transparenten Zustand in die Schärfe schrumpfen wie eine Rauchwolke, die sich legt; beim Verschwinden soll es wieder zu einer Unschärfe anschwellen und verschwinden: weich und recht schnell.
Achte darauf, dass der vergrößerte Zustand das Layout nicht verschiebt oder Scrollleisten erzeugt, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort.
Auch genannt Text Generate Effect
Die Wörter blenden beim Laden der Seite nacheinander ein, oft während sich eine Unschärfe auflöst, als würden sie gerade generiert.
Einsatz
Einleitungstexte im KI-Stil
Füge bei [wo] einen „Text Generate“-Effekt hinzu.
Die Wörter sollen nacheinander einblenden, während sich bei jedem eine weiche Unschärfe auflöst, als würde der Text gerade generiert: gleichmäßig und ruhig.
Spiele ihn beim Laden nur einmal ab, lass Screenreader sofort den ganzen Text lesen und zeige ihn bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an.
Auch genannt LQIP, Blur placeholder, Progressive image load
Eine winzige, unscharfe Version des Bildes hält den Platz und wird scharf, sobald das volle Bild geladen ist.
Einsatz
Hero-Bilder, Galerien
Füge bei [wo] einen „Blur-Up Placeholder“-Bildladeeffekt hinzu (auch LQIP oder Blur Placeholder genannt).
Eine winzige, stark unscharfe Version des Bildes soll sofort den Platz des Bildes füllen, und sobald das volle Bild geladen ist, soll es sanft und recht schnell scharf werden.
Reserviere die exakte Bildgröße, damit sich beim Laden nichts verschiebt, und beschneide die unscharfen Ränder, damit sie nicht über den Rahmen hinausragen.