vexi1es/animation

Was macht animation?

Bewegung in einer Oberfläche erklärt, was passiert ist: woher ein Element kam, wohin es ging, ob ein Druck registriert wurde. Alles, was dies nicht tut, ist Dekoration, und Dekoration hat ihr eigenes kleines Budget. Dieser Skill hilft, dieses Budget präzise auszugeben: Ohne ihn animiert das Modell alles mit dem gleichen Einblenden von unten.

Der Skill ist in sich geschlossen. Wenn ui-ux (Stil- und Interface-Regeln) und front (Code und Stack) parallel installiert sind, ergänzen sie ihn.

Drei Fragen zuerst

1. Wozu dient diese Bewegung? Feedback auf eine Aktion, eine Verbindung zwischen Zuständen, das Lenken der Aufmerksamkeit auf eine wichtige Sache, der Charakter der Marke. Wenn es keine Antwort gibt, nicht animieren.
2. Wie oft wird die Person es sehen? Das Budget hängt von der Antwort ab (nächster Abschnitt).
3. Was existiert bereits im Projekt? Sieh dir die Dauern, Kurven und die verwendete Animationsbibliothek an und fahre im gleichen Geist fort. Eine neue Bibliothek nur für einen einzigen Effekt ist fast immer ein Fehler.

Wie viel Animation angemessen ist

Die Hauptregel: Je häufiger die Aktion, desto weniger Animation. Was beim ersten Ansehen begeistert, nervt beim hundertsten.

Wie oft der Benutzer es sieht	Was tun
Hunderte Male am Tag (Tastaturkürzel, Befehlspalette, Tabs wechseln)	Keine Animation
Dutzende Male am Tag (Menüs, Tooltips, Hover)	Sehr schnell, bis 150 ms, oder keine Animation
Gelegentlich (Dialog, Seitenpanel, Benachrichtigung)	Ein normaler 200–300 ms Übergang
Selten oder einmal (Onboarding, Erfolgsbildschirm, der erste Bildschirm einer Landingpage)	Kann ausdrucksstark sein

Level nach Projekttyp:

• App (täglich genutzt): zurückhaltend. Steuerungszustände, ein- und ausgehende Ebenen, sanfte Layoutänderungen. Alles unter 300 ms. Nichts bewegt sich ohne Benutzeraktion.
• Showcase (Landingpage, Website, Promo): auffällig. Ein inszenierter Moment auf dem ersten Bildschirm, beim Scrollen erscheinende Blöcke, lebendige Details bei Hover. Der Rest ist ruhig.

Ein ausdrucksstarker Moment pro Bildschirm, überall sonst ruhig. Animation auf allem gleichzeitig ist genauso ein Zeichen einer Vorlage wie gar keine.

Nicht animieren: tastaturgesteuerte Aktionen, Themenwechsel, Kontextmenüs, alles, was der Benutzer mehrmals hintereinander tut.

Standardgeschmack

Der Skill-Besitzer kann diesen Abschnitt bearbeiten, um ihn an seine eigenen Vorlieben anzupassen. Die Worte des Benutzers in der aktuellen Anfrage haben Vorrang.

Willkommen auf Showcase-Oberflächen:

• Beim Scrollen enthüllen – Abschnitte und große Objekte erscheinen sanft, wenn zu ihnen gescrollt wird. Einmal, ohne Wiederholungen.
• Scroll-verbundene Szenen – ein fixierter Abschnitt, in dem das Scrollen die Animation antreibt und etwas über das Produkt erklärt. Eine oder zwei pro Seite; das Scrollen selbst bleibt normal, seine Geschwindigkeit und Richtung werden nie manipuliert.

Nicht verwenden, außer explizit danach gefragt:

• Glühen und Gradiantränder – schimmernde Umrisse, Neon-Glühen, animierte Gradientenhintergründe. Betonung kommt von Bewegung und Typografie, nicht von Licht.

Bibliotheken: CSS zuerst; wenn es in React nicht ausreicht – Motion; GSAP nur für komplexe Scroll-Szenen. Details in references/tools.md.

Der Charakter der Bewegung ist „verbunden und präzise“.

• Abläufe innerhalb einer App. Bildschirme verschmelzen miteinander, anstatt ausgetauscht zu werden: Ein „Held“-Objekt wandert durch jeden Schritt, Text verwandelt sich durch einen Weichzeichner in Text, nur das ändert sich, was sich geändert hat, eine neue Ebene wächst aus ihrer Quelle heraus. Wenn die Aufgabe eine Abfolge von Bildschirmen oder Zuständen hat, lies zuerst references/continuity.md und weise einen Helden zu.
• Landingpages und Websites. Eine Kurve für die gesamte Site mit einem scharfen Start und einer langen, sanften Verzögerung, kein Überschwinger; die Überschrift setzt sich Wort für Wort zusammen; große Dinge erscheinen aus einem Weichzeichner; eine Textszene beim Scrollen; alles in CSS. Rezepte mit genauen Werten sind in references/showcase-recipes.md.

Was beide gemeinsam haben: Weichzeichner zusammen mit Deckkraft als Material eines Übergangs, überlappender Ein- und Ausgang statt einer Warteschlange, kein Überschwinger und eine konsistente Kurve. Wenn der Stil des Projekts einen anderen Charakter erfordert (Terminal, Retro), siehe die Tabelle in references/patterns.md.

Dauern

Was	Dauer
Reaktion auf einen Druck, Hover, den Schalter selbst	100–150 ms
Tooltip, Dropdown-Menü, ein kleiner Eingang	150–200 ms
Dialog, Panel, Sheet	200–300 ms
Inhalt, der sich als Reaktion auf eine Aktion ändert (Preis, Zähler, Diagramm)	300–500 ms
Seitenübergang, große Layoutänderung	300–500 ms
Dekorative Szenen auf Showcase-Oberflächen, ohne Benutzereinwirkung	bis zu 800–1000 ms

• Ausgang ist kürzer als Eingang um etwa ein Drittel: Was geht, ist nicht mehr interessant.
• Je länger der Weg und je größer die Fläche, desto länger die Dauer; ein kleines Element bei 400 ms wirkt träge.
• Wenn sich Regeln überschneiden, gewinnt die kürzere. Das Steuerelement selbst reagiert immer in 100–150 ms; was es geändert hat, kann länger brauchen, um abzuschließen, aber der Benutzer muss nicht auf das Ende der Animation warten, bevor er erneut handeln kann.

Kurven und Federn

• Eingehend – ease-out: ein schneller Start und ein sanfter Stopp, was sich reaktionsschnell anfühlt.
• Ausgehend – ebenfalls ease-out, aber kürzer. Einige Designsysteme verwenden für Ausgänge eine beschleunigende Kurve, aber ihr langsamer Start fühlt sich wie eine Verzögerung an, daher wird sie hier nicht verwendet; der Skill-Besitzer kann diese Regel ändern.
• Bewegung über den Bildschirm von Punkt zu Punkt – ease-in-out.
• Linear – nur für kontinuierliche Bewegung: ein Dreh-Indikator, ein Laufband, Fortschritt.

Standard-Token:

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* Hauptkurve: scharfer Start, lange Verzögerung */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;    /* Reaktion: Farbe, Deckkraft */
  --duration-base: 300ms;    /* Ebenen, Hintergrund und Schatten von Steuerelementen */
  --duration-slow: 450ms;    /* Inhalt, der in Inhalt übergeht */
  --duration-reveal: 800ms;  /* Blöcke, die auf Showcase-Oberflächen erscheinen */
}

Eine Kurve für das gesamte Projekt: Wenn jeder Teil eines Übergangs sie verwendet, lesen sie sich als eine einzige Bewegung. Mit dieser Kurve kann eine Reaktion 200–450 ms dauern und sich dennoch augenblicklich anfühlen, da die meiste Änderung in den ersten 100 ms stattfindet.

Federn schlagen Kurven, wenn eine Geste die Bewegung antreibt oder die Animation mittendrin unterbrochen werden kann (Ziehen, ein Sheet, Neuanordnung einer Liste): Sie bewahren die Geschwindigkeit und ruckeln nicht. Überschwinger sind nur für Bewegung und Skalierung; für Farbe und Deckkraft ist er immer null. Auffälliger Überschwinger passt zu verspielten Stilen und nervt in Arbeitswerkzeugen.

Ausführungsregeln

• transform und opacity animieren. Breite, Höhe, Ränder und Position lösen eine Neuberechnung des Layouts aus und verursachen Ruckler. Verwende zur Größenänderung scale, die FLIP-Technik oder eine Layout-Animation einer Bibliothek.
• Weichzeichner ist die erlaubte Ausnahme. filter: blur() bis 12px zusammen mit Deckkraft ist das Signaturmaterial eines Übergangs, kostet aber mehr: Wende es auf kleine Blöcke an (eine Überschrift, eine Abbildung, ein Icon, eine Karte), niemals auf einen ganzen Bildschirm, und teste auf einem Telefon.
• Ein- und Ausgang überlappen sich. Das, was geht, und das, was kommt, existieren für 30–50 % der Dauer nebeneinander. Eine Warteschlange von „erst verschwand es, dann erschien es“ unterbricht die Verbindung und verdoppelt die Zeit.
• Nur der Unterschied bewegt sich. Was sich nicht geändert hat (Ziffern, Wörter, Icons), bleibt an Ort und Stelle.
• Niemals von scale(0) starten. Nichts im Leben erscheint aus einem Punkt: Beginne bei 0.9–0.96 zusammen mit Deckkraft.
• transform-origin sitzt an der Quelle. Ein Menü wächst aus seinem Button, nicht aus der Mitte.
• Drücken: scale(0.97) bei :active gibt das Gefühl eines physischen Buttons.
• Unterbrechbarkeit. Baue interaktive Bewegung mit transition, nicht mit @keyframes: Ein Übergang kann mittendrin umgekehrt werden, Keyframes nicht.
• Rollen zuerst, Timing zweitens. Wenn sich mehrere Elemente als Reaktion auf ein Ereignis bewegen, weise einen einzigen Anführer zu; der Rest ist Unterstützung, Dekoration oder statisch. Zwei Anführer sind ein Layout-, kein Animationsproblem.
• Ein Eingang pro Container. Wenn das Panel hineingeschoben wurde, ist sein Inhalt bereits da: Füge keine Staffelung von Kindern zusätzlich zum Eingang des Elternteils hinzu.
• Was geht, gibt seinen Platz sofort frei, so dass die Nachbarn näher rücken, während es ausgeblendet wird, nicht danach.
• Ausgang spiegelt Eingang und geschieht auf einmal. Was von rechts hereinkam, geht nach rechts hinaus; eine Gruppe verschwindet gleichzeitig, ohne umgekehrte Staffelung.
• Richtung folgt der Bedeutung: „vorwärts“ kommt von rechts herein, „zurück“ von links.
• Staffelung: ein Schritt von 30–80 ms zwischen den Elementen, die gesamte Kaskade nicht länger als 300–400 ms; nach dem sechsten oder siebten Element erscheint der Rest zusammen. Auf dem ersten Bildschirm einer Showcase kann der Schritt bis zu 100–150 ms betragen.
• Gesten verwenden Federn und blockieren niemals. Das Element folgt dem Finger eins zu eins, kann mittendrin gegriffen werden, und nimmt nach dem Loslassen die Geschwindigkeit der Geste auf. Überschwinger nur nach einem Wurf.
• Tooltips: eine Verzögerung vor dem ersten, die nächsten in der gleichen Gruppe erscheinen sofort und ohne Animation.
• Beim Scrollen enthüllen geschieht einmal. Ein Block, der sich bei jedem Durchgang versteckt und wieder erscheint, ist ermüdend.
• Die Seite ist im Ruhezustand vollständig. Der Inhalt darf nicht davon abhängen, ob ein Skript ausgeführt wurde: Der versteckte Anfangszustand wird nur zusammen mit der aktivierten Animation gesetzt, niemals in den Basis-Styles. Andernfalls sieht der Benutzer bei einem Skriptfehler, in Vorschauen und Screenshots einen leeren Bildschirm.
• Hover ändert eine Eigenschaft, nicht Skalierung, Anhebung und Schatten auf einmal.
• will-change – sparsam und nur für die Dauer der Animation, nicht auf alles.

Barrierefreiheit

Dies ist nicht optional: Bewegung auf dem Bildschirm verursacht bei manchen Menschen Schwindel und Übelkeit.

• prefers-reduced-motion: reduce: Bewegung, Skalierung, Drehung, Parallaxe und Autoplay entfernen; die sanfte Änderung von Deckkraft und Farbe beibehalten. Alles auszuschalten beraubt die Person des Feedbacks. Der zuverlässigste Ansatz ist, Bewegung nur dort zu deklarieren, wo sie erlaubt ist:

.card { transition: opacity var(--duration-base) var(--ease-out), background-color var(--duration-fast); }

@media (prefers-reduced-motion: no-preference) {
  .card { transition-property: opacity, background-color, transform; }
  .card:hover { transform: translateY(-2px); }
}

• Alles, das sich länger als 5 Sekunden von selbst bewegt (ein Laufband, ein Karussell, Hintergrundvideo), hat eine Pausentaste – eine WCAG 2.2.2 Anforderung.
• Nichts blinkt mehr als dreimal pro Sekunde.
• Halte Bewegungen über eine große Fläche (Parallaxe, Hintergrundskalierung) mit kleiner Amplitude.
• Animierter Text bleibt für einen Screenreader lesbar: Eine Aufteilung pro Zeichen erhält ein aria-label mit der gesamten Phrase, und die Teile erhalten aria-hidden.

Überprüfung

• Sieh dir die Animation in einem Browser an, nicht nur im Code; wenn das nicht möglich ist, teile dem Benutzer mit, dass sie nicht live überprüft wurde.
• Verlangsame sie um das 4- bis 10-fache in den Entwicklertools: Ruckler, ein falscher Wachstumsursprung und unnötige Eigenschaften werden sichtbar.
• Drücke schnell mehrmals hintereinander: Die Animation muss unterbrechen und sich umkehren, nicht in einer Warteschlange auflaufen.
• Schalte „Bewegung reduzieren“ im System ein und stelle sicher, dass die Oberfläche immer noch funktioniert und verständlich bleibt.
• Ein Screenshot, der direkt nach dem Scrollen aufgenommen wurde, zeigt möglicherweise einen leeren Raum, in dem ein Block noch nicht erschienen ist – ein Grund, die Regel „Die Seite ist im Ruhezustand vollständig“ zu überprüfen.

Überprüfungsmodus

Wenn du gebeten wirst, eine bestehende Animation zu bewerten oder zu korrigieren, präsentiere die Ergebnisse als Tabelle:

Wo	Vorher	Nachher	Warum
Modal.tsx:18	scale(0) → 1, 500 ms, ease-in	scale(0.96) + Deckkraft, 220 ms, ease-out	erscheint aus einem Punkt und hinkt hinterher

Referenzdateien

• references/continuity.md – verbundene Animation: der Held eines Ablaufs, ineinander übergehende Bildschirme, Zahlen, die Ziffer für Ziffer wechseln, beim Scrollen einklappen; die Techniken und wie man sie im Web umsetzt. Lies für jede Abfolge von Bildschirmen oder Zuständen.
• references/choreography.md – eine Gruppe von Elementen, die auf ein Ereignis reagieren: Rollen (Anführer, Unterstützung, Dekoration, statisch), Beziehungen innerhalb eines Paares (zusammen, überlappend, sequentiell, tragen), Staffelungen, Richtung, Ausgang, Unterbrechung. Lies, wenn sich mehr als ein Element bewegt.
• references/gestures.md – alles, das gezogen, gewischt und geworfen wird: Fingerverfolgung, Unterbrechbarkeit, Federn, Geschwindigkeitsübergabe, Impulsprojektion, weiche Grenzen. Lies für Sheets, Karussells, Schieberegler, Drag & Drop.
• references/showcase-recipes.md – Landingpage-Rezepte mit genauen Werten: eine Wort-für-Wort-Überschrift, Erscheinen aus einem Weichzeichner, eine gezeichnete Unterstreichung, eine Kartenkaskade, Text beim Scrollen. Lies für den ersten Bildschirm und Abschnitte einer Website.
• references/patterns.md – ein Katalog von Techniken: Mikro-Interaktionen, Eingänge, Zahlenänderungen, Scrollen, Seitenübergänge, Text; wann jede funktioniert und wann sie schadet; der Charakter der Bewegung nach Stil.
• references/tools.md – eine Werkzeugleiter von CSS bis GSAP mit Codebeispielen und Auswahlregeln.