Carousel Crossfade
Auch genannt Fade slideshow, Carousel fade
Die Slides bleiben an ihrem Platz und blenden ineinander über, statt zu gleiten.
Einsatz
Hero-Slideshows, Kundenstimmen
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] einen „Carousel Crossfade“ hinzu (auch fade slideshow oder carousel fade genannt).
Die Slides sollen an ihrem Platz bleiben und langsam ineinander überblenden – die alte blendet aus, während die nächste gleichzeitig einblendet – und dann ein paar Sekunden stehen bleiben bis zum nächsten Wechsel.
Springe nahtlos zurück zur ersten Slide, pausiere bei Hover oder Fokus und wechsle bei reduzierter Bewegung (prefers-reduced-motion) nicht automatisch weiter.Ähnliche Animationen
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.A
B
C
Klicken
Carousel Slide
Auch genannt Slider, Swipe carousel, Scroll-snap carousel
Slides ziehen horizontal durch einen sichtbaren Ausschnitt und rasten jeweils eine nach der anderen ein.
Einsatz
Hero-Banner, Produktgalerien
Füge bei [wo] ein „Carousel Slide“ hinzu (auch slider oder swipe carousel genannt).
Jeder Schritt soll die Reihe seitwärts schieben, sodass die nächste Slide in der Mitte einrastet, weich und abbremsend, während die Nachbarn an den Rändern hervorschauen und die Positionspunkte mitgehen.
Bewege immer eine Slide auf einmal, unterstütze Wischen auf Touch-Geräten ebenso wie Buttons und Pfeiltasten, und beschrifte die Steuerelemente für Screenreader.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.ABCDE
Ziehen
Coverflow
Auch genannt Cover flow carousel
Das mittlere Element zeigt nach vorn, während die seitlichen perspektivisch weggedreht sind.
Einsatz
Album- und Medienkarussells
Füge bei [wo] ein „Coverflow“-Karussell hinzu (auch cover flow carousel genannt).
Das mittlere Element soll nach vorn zeigen, während die Elemente an den Seiten perspektivisch wegdrehen; seitliches Ziehen verschiebt die Reihe, und beim Loslassen rastet sie sanft beim nächsten Element ein.
Unterstütze neben dem Ziehen auch Pfeiltasten und Wischen, und lass das vertikale Scrollen der Seite auf Touch-Geräten funktionieren.Mehr aus Component & Layout
BC
A
A
Klicken
Container Transform
Auch genannt Card expand to detail, Expandable card, Morph card to page
Eine Karte wächst zur vollständigen Detailansicht, wobei ein einziger sichtbarer Container seine Form ändert und neue Inhalte zeigt.
Einsatz
Listenkarte zu Detailansicht, FAB zu Sheet
Füge bei [wo] einen „Container Transform“-Übergang hinzu (auch card expand to detail oder expandable card genannt).
Wenn die Karte geöffnet wird, soll derselbe Container weich zur vollständigen Detailansicht wachsen: Der alte Inhalt blendet schnell aus, und der neue blendet ein, wenn das Wachsen fast fertig ist; beim Schließen läuft es rückwärts.
Halte es als einen durchgehenden Container statt einer Überblendung zwischen zwei getrennten Boxen, und setz den Fokus beim Öffnen in die Detailansicht.- A
- B
- C
- D
Ziehen
Drag-to-Reorder List
Auch genannt Reorder, Sortable list
Beim Ziehen eines Eintrags gleiten die anderen aus dem Weg und ordnen sich in der neuen Reihenfolge ein.
Einsatz
Kanban, sortierbare Einstellungen, Playlists
Füge bei [wo] eine „Drag-to-Reorder List“ hinzu (auch sortable list genannt).
Der gezogene Eintrag soll dem Zeiger direkt folgen und sich leicht abheben, während die anderen Einträge weich aus dem Weg gleiten; beim Loslassen soll er schnell in den nächstgelegenen Platz einrasten.
Unterstütze Touch ebenso wie Maus, und biete eine Möglichkeit, Einträge per Tastatur zu verschieben, wobei die neue Position für Screenreader angesagt wird.