Animation Vocabulary

Was macht Animation Vocabulary?

Wandle eine vage Beschreibung einer Bewegung oder eines Effekts in die präzise Bezeichnung um, sodass der Benutzer weiß, wonach er fragen muss.

Kurzanleitung

Der Benutzer beschreibt einen Effekt lose. Du gibst den/die passenden Begriff(e) in diesem Format zurück:

**Stagger** — Mehrere Elemente nacheinander mit einer kleinen Verzögerung dazwischen animieren, wodurch eine Kaskade entsteht.

Wenn mehrere Begriffe infrage kommen, liste den besten Treffer zuerst auf, dann 1–2 Alternativen mit einem einzeiligen Hinweis, worin sie sich unterscheiden.

Anleitung

1. Lies nach Absicht, nicht nach Schlagworten. Benutzer beschreiben, was sie sehen oder fühlen („federnd“, „rutscht weg“, „zeichnet sich selbst“), nicht den technischen Namen. Ordne die Empfindung dem untenstehenden Glossar zu.
2. Zitiere das Glossar wörtlich. Seine Beschreibungen sind maßgeblich – verwende sie wie sie sind, paraphrasiere nicht.
3. Disambiguiere nahe Begriffe. Wenn zwei konkurrieren (Clip-path vs. Maske, Pop in vs. Bounce, Shared element transition vs. Layout-Animation), grenze sie ab, damit der Benutzer wählen kann.
4. Wenn nichts genau passt, nenne den nächstgelegenen Begriff und sage deutlich, dass es sich um eine Annäherung handelt, oder beschreibe den Effekt mit der Sprache des Glossars (z. B. „das ist ein Stagger von Scale-in-Eingängen“).
5. Bleibe innerhalb dieses Glossars. Wenn ein Begriff hier wirklich nicht vorkommt, sage das, anstatt einen zu erfinden – du darfst das Konzept aber mit diesen Worten erklären.
6. Halte es knapp. Eine Namensfrage will einen Namen, keinen Aufsatz. Beginne mit dem Begriff; erweitere nur auf Nachfrage.

Beispiele

Beispiel 1 — gefühlsbasiert Benutzer: „Wie heißt es, wenn ein Popover so aussieht, als ob es aus dem Button wächst, den du geklickt hast, statt aus seiner Mitte?“ Ausgabe:

**Ursprungsbewusste Animation** — Ein Element animiert aus seinem Auslöser heraus, wie ein Popover, das aus dem Button wächst, der es geöffnet hat, statt aus seiner eigenen Mitte – dem Standard in CSS.

Beispiel 2 — Disambiguierung Benutzer: „Das Ding, wo ein Bild in ein anderes Bild übergeht.“ Ausgabe:

**Morph** — Eine Form verwandelt sich fließend in eine andere Form, z. B. Dynamic Island.

Nahe Alternativen:
- **Crossfade** — wenn sie an derselben Stelle einfach ineinander überblenden.
- **Shared element transition** — wenn ein Element von einer Position zur anderen wandert und sich dabei transformiert.

Beispiel 3 — physikalisches Gefühl Benutzer: „Dieses iOS-Scrollen, das widersteht und zurückschnappt, wenn man zu weit zieht.“ Ausgabe:

**Rubber-banding** — Widerstand und Zurückschnappen, wenn über eine Grenze gezogen wird (das iOS-Überscroll-Gefühl).

Glossar

Eine kuratierte Momentaufnahme, die der /vocabulary-Seite des Projekts entspricht; beide bei Änderungen synchron halten.

Ein- & Ausgänge — wie Elemente erscheinen und verschwinden

• Fade in / Fade out — Element erscheint oder verschwindet durch Änderung der Deckkraft.
• Slide in — Element tritt ein, indem es von außerhalb des Bildschirms hereingleitet (links, rechts, oben oder unten).
• Scale in — Element wächst beim Erscheinen von kleiner auf volle Größe, oft mit einem Fade kombiniert.
• Pop in — Element erscheint mit leichtem Überschwingen, als ob es an seinen Platz springt.
• Reveal — Inhalt wird schrittweise freigelegt, oft durch Animieren eines Clip-Pfads oder einer Maske.
• Enter / Exit — Die Animation, die ein Element abspielt, wenn es zum Bildschirm hinzugefügt oder von ihm entfernt wird.

Ablaufsteuerung & Timing — Koordination mehrerer Elemente oder Momente

• Keyframes — Definierte Punkte in einer Animation (0 %, 50 %, 100 %), zwischen denen der Browser die Zwischenräume füllt.
• Interpolation / Tween — Erzeugung aller Zwischenbilder zwischen einem Start- und Endwert, sodass die Bewegung kontinuierlich ist.
• Stagger — Mehrere Elemente nacheinander mit einer kleinen Verzögerung dazwischen animieren, wodurch eine Kaskade entsteht.
• Orchestrierung — Bewusstes Timing mehrerer Animationen, damit sie sich wie eine koordinierte Bewegung anfühlen.
• Verzögerung — Zeit vor dem Start einer Animation.
• Dauer — Wie lange eine Animation dauert.
• Fill-Modus — Gibt an, ob ein Element die Stile seines ersten oder letzten Keyframes behält, bevor die Animation startet oder nachdem sie endet (z. B. forwards).
• Schrittweise Animation — Eine Animation, die in diskrete Schritte unterteilt ist, wie ein Countdown-Timer.

Bewegung & Transformationen — Änderung von Position, Größe oder Winkel eines Elements

• Translate — Ein Element entlang der X- oder Y-Achse verschieben.
• Scale — Ein Element vergrößern oder verkleinern.
• Rotate — Ein Element um einen Punkt drehen.
• Skew — Ein Element entlang der X- oder Y-Achse neigen, wodurch es aus seiner rechteckigen Form geschert wird.
• 3D-Kippen / Flip — Drehung im 3D-Raum (rotateX / rotateY) zur Erzeugung von Tiefe.
• Perspektive — Wie stark der 3D-Effekt wirkt – ein niedrigerer Wert übertreibt die Tiefe, als ob der Betrachter näher wäre.
• Transformationsursprung — Der Ankerpunkt, von dem aus eine Skalierung oder Drehung wächst oder sich dreht.
• Ursprungsbewusste Animation — Ein Element animiert aus seinem Auslöser heraus, wie ein Popover, das aus dem Button wächst, der es geöffnet hat, statt aus seiner eigenen Mitte – dem Standard in CSS.

Übergänge zwischen Zuständen — Verbindung eines Zustands, einer Ansicht oder eines Elements mit einem anderen

• Crossfade — Ein Element blendet aus, während ein anderes an derselben Stelle einblendet.
• Kontinuitätsübergang — Eine Änderung, die den Benutzer orientiert hält, indem sie Vorher und Nachher visuell verbindet. Beispielsweise dasselbe Rechteck größer und kleiner machen.
• Morph — Eine Form verwandelt sich fließend in eine andere Form, z. B. Dynamic Island.
• Shared element transition — Ein Element wandert und transformiert sich von einer Position zur anderen, wie eine Miniaturansicht, die sich zu einer Karte ausdehnt.
• Layout-Animation — Wenn sich Größe oder Position eines Elements ändert, animiert es an die neue Stelle, anstatt zu springen.
• Akkordeon / Collapse — Ein Bereich dehnt und staucht seine Höhe sanft aus, um Inhalte zu zeigen oder zu verbergen.
• Richtungsbewusster Übergang — Inhalt gleitet in eine Richtung vorwärts und in die entgegengesetzte Richtung zurück, sodass die Navigation ein Richtungsgefühl hat.

Scrollen — Bewegung, die an das Scrollen oder Navigieren zwischen Ansichten gebunden ist

• Scroll-Reveal — Elemente blenden ein oder gleiten ein, wenn sie in den Viewport gelangen.
• Scrollgesteuerte Animation — Eine Animation, deren Fortschritt direkt an die Scrollposition gebunden ist.
• Parallaxe — Hintergrund und Vordergrund bewegen sich beim Scrollen mit unterschiedlicher Geschwindigkeit, was Tiefe erzeugt.
• Seitenübergang — Eine Animation, die beim Navigieren von einer Seite/Route zu einer anderen abgespielt wird.
• View-Transition — Der Browser wechselt zwischen zwei Zuständen oder Seiten und verbindet dabei gemeinsame Elemente.

Feedback & Interaktion — Reaktion auf Benutzeraktionen

• Hover-Effekt — Visuelle Änderung, wenn der Cursor über ein Element bewegt wird.
• Drück-/Tipp-Feedback — Eine subtile Verkleinerung beim Klicken auf ein Element, sodass es sich physisch anfühlt.
• Halten zum Bestätigen — Ein Fortschrittseffekt, der sich füllt, während der Benutzer einen Button gedrückt hält.
• Drag — Bewegen eines Elements durch Greifen, oft mit Momentum beim Loslassen.
• Drag to Reorder — Ziehen von Elementen in einer Liste zum Neuanordnen, während die anderen Platz machen.
• Swipe to dismiss — Ziehen eines Elements aus dem Bildschirm, um es zu schließen, wie einen Drawer oder Toast.
• Rubber-banding — Widerstand und Zurückschnappen, wenn über eine Grenze gezogen wird (das iOS-Überscroll-Gefühl).
• Shake / Wiggle — Ein schnelles Hin-und-Her-Zittern, das einen Fehler oder eine zurückgewiesene Eingabe signalisiert.
• Ripple — Ein Kreis, der sich vom Punkt eines Tippens aus ausdehnt und den Druck bestätigt.

Easing — wie sich die Geschwindigkeit während einer Animation ändert

• Easing — Die Rate, mit der eine Animation schneller oder langsamer wird.
• Ease-out — Startet schnell, endet langsam. Der Standard für die meisten UI-Elemente und alles, was auf den Benutzer reagiert.
• Ease-in — Startet langsam, endet schnell. Wird normalerweise vermieden; kann sich träge anfühlen.
• Ease-in-out — Langsam, schnell, langsam. Gut für Elemente, die bereits auf dem Bildschirm sind und sich von A nach B bewegen.
• Linear — Konstante Geschwindigkeit. Für UI vermeiden; Spinnern oder Laufbändern vorbehalten.
• Cubic-bezier — Eine benutzerdefinierte Easing-Kurve, die du für präzise Kontrolle definierst.
• Asymmetrisches Easing — Eine Kurve, die mit unterschiedlichen Raten beschleunigt und verlangsamt. Fühlt sich lebendiger an als eine symmetrische.

Feder-Animationen — physikbasierte Bewegung als Alternative zu Easing mit fester Dauer

• Spring — Bewegung, die von Physik (Spannung, Masse, Dämpfung) angetrieben wird, statt von einer festen Dauer.
• Steifigkeit / Spannung — Wie stark die Feder ihr Ziel anzieht. Höhere Werte wirken schnappiger.
• Dämpfung — Wie schnell eine Feder zur Ruhe kommt. Niedrigere Dämpfung bedeutet mehr Hüpfen und Schwingen.
• Masse — Wie schwer sich das animierte Element anfühlt. Mehr Masse macht es langsamer und träger.
• Bounce — Eine Feder, die überschwingt und zur Ruhe kommt, was Verspieltheit verleiht.
• Wahrgenommene Dauer — Wie lange sich eine Feder fertig anfühlt, auch wenn sie darunter noch mikro-fein ausschwingt.
• Momentum — Bewegung, die Geschwindigkeit trägt, insbesondere nach einem Drag oder einer Unterbrechung.
• Geschwindigkeit — Wie schnell und in welche Richtung sich ein Element bewegt. Eine Feder trägt sie bei Unterbrechung in die nächste Animation, sodass ein weggeschnipptes Element seine Geschwindigkeit behält.
• Unterbrechbare Animation — Eine Animation, die mitten im Verlauf sanft umgeleitet werden kann, anstatt erst zu Ende gehen zu müssen.

Schleifen & Umgebungsbewegung — Animationen, die von selbst laufen

• Marquee — Text oder Inhalt, der kontinuierlich in einer Schleife scrollt.
• Schleife — Eine Animation, die sich wiederholt, eine festgelegte Anzahl von Malen oder unendlich.
• Alternate (yoyo) — Eine Schleife, die vorwärts und dann rückwärts läuft, anstatt zum Start zurückzuspringen.
• Orbit — Ein Element, das auf einem kontinuierlichen Pfad um ein anderes kreist.
• Puls — Eine sanfte, sich wiederholende Skalierungs- oder Deckkraftänderung, um Aufmerksamkeit zu erregen.
• Float — Ein sanftes, kontinuierliches Auf- und Abschweben, das ein statisches Element lebendig und schwerelos wirken lässt.
• Leerlauf-Animation — Subtile Bewegung, die abgespielt wird, während ein Element einfach dasitzt und darauf wartet, interagiert zu werden.

Feinschliff & Effekte — die kleinen Details, die Gut von Großartig trennen

• Blur — Ein Weichzeichnungsfilter, der verwendet wird, um ein Element weicher zu machen oder winzige Unvollkommenheiten zu kaschieren.
• Clip-path — Ausschneiden eines Elements in eine Form, verwendet für Aufdeckungen, Masken und Vorher/Nachher-Schieberegler.
• Maske — Ausblenden oder Freilegen von Teilen eines Elements mithilfe einer Form oder eines Verlaufs – wie Clip-path, aber mit weichen, ausblendbaren Kanten.
• Vorher / Nachher-Schieberegler — Ein ziehbarer Teiler, der zwischen zwei überlagerten Bildern wischt, um sie zu vergleichen.
• Linienzeichnung — Ein SVG-Pfad, der sich selbst zeichnet, wie ein unsichtbarer Stift, der ihn nachfährt.
• Textmorph — Text, der sich beim Ändern Zeichen für Zeichen animiert und so auf den neuen Wert aufmerksam macht.
• Skeleton / Shimmer — Ein Platzhalter mit einem wandernden Glanz, der angezeigt wird, während Inhalte geladen werden.
• Number Ticker — Ziffern, die auf einen Wert hochrollen oder hochzählen.
• Tabellarische Zahlen — Fest breite Ziffern, sodass Zahlen beim Ändern nicht hin- und herspringen. Unverzichtbar für Ticker, Timer und Zähler.
• Typewriter — Text, der ein Zeichen nach dem anderen erscheint, als würde er getippt.

Leistung — was Bewegung flüssig hält statt ruckelig

• Bildrate (FPS) — Bilder pro Sekunde. 60fps sind die Basis für flüssige Bewegung; 120fps auf neueren Displays.
• Jank — Sichtbares Ruckeln, wenn der Browser Bilder auslässt, weil er mit der Animation nicht Schritt halten kann.
• Ausgelassenes Bild — Ein Bild, dessen Zeichnungsfrist der Browser verpasst hat, was zu einem winzigen Ruck in der Bewegung führt.
• Compositing — Die GPU ein Element auf einer eigenen Ebene bewegen oder ein-/ausblenden lassen, ohne Layout oder Paint neu zu berechnen.
• will-change — Ein CSS-Hinweis, dass ein Element gleich animiert wird, damit der Browser es vorab auf eine eigene Ebene heben kann.
• Layout Thrashing — Animieren von Eigenschaften wie width, height, top oder left, die den Browser zwingen, das Layout jedes Bildes neu zu berechnen, was Jank verursacht.

Prinzipien, die man kennen sollte — Konzepte, die leiten, wann und wie animiert wird

• Zweckmäßige Animation — Bewegung sollte einen Zweck erfüllen – orientieren, Feedback geben, Beziehungen zeigen – nicht nur dekorieren.
• Antizipation — Ein kleiner Aufschwung in die entgegengesetzte Richtung vor einer Bewegung, der darauf hindeutet, was gleich passieren wird.
• Nachlauf — Teile eines Elements bewegen sich weiter und setzen sich leicht nach, nachdem die Hauptbewegung stoppt, was Gewicht verleiht.
• Squash & Stretch — Verformen eines Elements während der Bewegung, um Gewicht, Geschwindigkeit und Flexibilität zu vermitteln.
• Wahrgenommene Leistung — Die richtige Animation lässt eine Oberfläche schneller wirken, auch wenn sie es nicht ist.
• Häufigkeit der Nutzung — Je öfter ein Benutzer eine Animation sieht, desto kürzer und subtiler sollte sie sein.
• Räumliche Konsistenz — Animieren, sodass ein Element seine Identität und Position über Zustände hinweg behält, sodass Benutzer nie den Überblick verlieren, wohin Dinge verschwunden sind.
• Hardwarebeschleunigung — Animieren von transform und opacity ermöglicht der GPU, Bewegung flüssig zu halten.
• Reduzierte Bewegung — Respektieren der Einstellung prefers-reduced-motion des Benutzers durch Reduzieren oder Entfernen von Bewegung.