Timing von Animationen und UX-Wahrnehmung

1) Warum Timing kritisch ist

• Gefühl der sofortigen Reaktion und Vertrauen in das System;
• Klarheit der Ursache-Wirkungs-Beziehungen (von wo/wo sich das Element bewegt hat);
• Müdigkeit und Komfort in langen Sitzungen;
• Genauigkeit der Aktionen (insbesondere auf Mobilgeräten und bei hohen Einsätzen).

Regel: Das Timing dient der Bedeutung. Wenn die Animation nicht hilft, das „was passiert ist“ zu verstehen, stört sie.

2) Psychophysik und Schwellen

• ≤ 50 ms - Echo der Eingabe (Drucken, Klick-Effekt); scheint augenblicklich.
• ≤ 100 ms - der erste visuelle Fidback für die Aktion (Taste „gedrückt“).
• 120-180 ms - hover/focus, „weicher“ Zustandsübergang.
• 180-280 ms - modalki/panels; Es wird als „natürliches“ Aussehen wahrgenommen.
• 300-500 ms - rücksichtsvolle Bewegung (shared element), Fortschritt „Schritt nach vorne“.
💡 700 ms - Risiken der „Langsamkeit“; Lassen Sie es nur, wenn es Sinn macht (z. B. Bestätigung des Gewinns).
• ≈ 1200-1600 ms - Skeleton/Shimmer-Zyklus; länger - ermüdet.

3) Beschleunigungskurven (Easing) und „Gewicht“

• Standard: 'cubic-bezier (0. 2, 0, 0. 2, 1) 'ist eine neutrale „materielle“ Dynamik.
• Beschleunigung (gepresst): 'cubic-bezier (0. 4, 0, 1, 1)'- schnelle Eingabe, kurzer Klick.
• Verlangsamung (overlay out): 'cubic-bezier (0, 0, 0. 2, 1) 'ist die weiche Ausgabe.
• Betonter Akzent (selten): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Gewichtsoptik: Je größer die Komponente (Karte, Drower), desto länger die Dauer (+ 40-80 ms zur Basis).

4) Phasen und Choreografie

1. Initiation (10-40ms): leicht fade/scale 0. 98→1 ist ein Signal des Anfangs.

2. Transport (Hauptphase): Verlagerung/Offenlegung.

3. Tiefgang (20-60 ms): kleine Bremse, Stabilisierung des Schatten-/Fokusrings.

• Listen: 20-40 ms/Element, maximal 6-8 Elemente in einer Reihe.
• Formen: ohne Kaskade; alles erscheint gleichzeitig, um die Eingabe nicht zu stören.

Reversibilität: „rückwärts“ spiegelt „vorwärts“ und ist um 15-30% schneller.

5) Timings nach Art der Interaktionen

6) Zeitwahrnehmung: Wie man ohne echte Beschleunigung „beschleunigt“

Instant affordance: Sofortiger Cursor-/Pressed-Style-Wechsel ≤ 100ms noch vor dem Netzwerk.
Komplexität verbergen: Download parallel; Daten im Hintergrund hochziehen, bevor das Bedienfeld geöffnet wird.
Semantischer Anker: Das geteilte Element und die Bewegungsrichtung reduzieren die kognitiven Kosten des Wartens.
Optimistische Updates: Die Benutzeroberfläche ist sofort „bereit“, der Server bestätigt oder rollt zurück.

7) Ermüdbarkeit und Hygiene von Animationen

Vermeiden Sie endlose Pulsationen; Jeder Zyklus muss unterbrochen oder abschaltbar sein.
Machen Sie Mikroeffekte auf Elementarrays (Tabelle, Grid) ohne Blur/Box-Shadow auf jedem Knoten.
Unterstützen Sie' prefers-reduced-motion: reduce': Lassen Sie nur ein fade ≤ 100ms oder einen statischen Statusschalter.

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) Timing-Token (Design-System)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Namensgebung: 'motion. duration.{role}` и `motion. easing. {role}'- einheitlich für die Komponenten Engine und Figma.

9) Implementierung: CSS und Framer Motion

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10) Zusammensetzung der Zeit: Parallele vs Sequenz

Parallel (fade + übersetzen gleichzeitig) - schneller im Gefühl.
Sequenz (erst Container, dann Inhalt) - klarer die Struktur, aber länger. Bewerben Sie sich, wenn es wichtig ist, die Hierarchie zu zeigen.
Vermeiden Sie „Schritte“> 60 ms zwischen eng verbundenen Elementen in einem Block.

11) Timing und Inhalt

Text: Animieren Sie letter/word-by-word in Produkten nicht; Es ist eine Marketing-Technik.
Zahlen/Zähler: Schritt 40-60 ms Schlachten, ohne Layout-Jitter (tabular-nums).
Graphen: Serien-Offenlegung 180-240 ms, Hover-Highlight ≤ 120 ms.

12) Verfügbarkeit und Wahrnehmungsfehler

Fokusstile sollten ohne Verzögerung erscheinen.
Warnungen/Fehler - Animation minimal (≤ 120 ms), ohne schütteln, wenn der Benutzer mit AT (assistive tech).
Vermeiden Sie Blitze> 3/s und große Kontrastflicker.

13) Besonderheiten von iGaming

• Presse ≤ 100 ms der Status „busy“ sofort; abschließender Toast/Indikator - ohne Verzögerung.
• Das Timing der UI-Antwort ist wichtiger als die Bestätigungsanimation: Die Bestätigung ist kurz 120-160 ms.

• Start ≤ 200 ms, gleichmäßiger Zyklus, Bremsen 300-500 ms; kein endloses Flimmern.
• Win-Burst ≤ 500 ms, ohne Strobe; Der Wortlaut des Betrags ist AAA.

• Schlachtfeld-Updates (250-1000 ms); visueller Diff ≤ 160 ms; ohne Layoutsprünge.
• Auf dem Hover/Fokus - Debunk Beleuchtung 80-120 ms, um nicht zu „blinken“.

14) Anti-Muster

Lineare Kurven für Bewegungen (Gefühl „mechanisch“).
Dauer> 400 ms für einfache Tasterzustände.
Kaskade von 100 + ms nach einer Liste von Dutzenden von Elementen (Travomotin).
Schatten/blur auf Hunderten von Elementen in der Animation.
Inkonsistenz: Gleiche Aktionen mit unterschiedlichen Timings in einem Produkt.
Verzögerter Fokus oder Verzögerung bei der Aktivierung über die Tastatur.

15) QS-Checkliste der Zeitpunkte

Konsistenz

• Timings und Kurven werden von Token genommen, die für die gleichen Aktionen gleich sind.

Antwort

• Press/Hover/Focus passen in eine Skala von 80-180 ms.
• Die erste visuelle Reaktion ≤ 100 ms.

Choreographie

• Eingang und Ausgang sind symmetrisch; Ausgang ist 15-30% schneller als Eingang.
• Die Kaskade überschreitet nicht 8 Elemente und 40ms Schritt.

A11y

• „prefers-reduced-motion“ wird unterstützt; Fokus ohne Verzögerung.
• Kein Blinken> 3/s.

Performance

• Nur 'transform/opacity' wird animiert; keine Masse blur/Schatten.

16) Dokumentation im Konstruktionssystem

„Motion Tokens“: duration/easing/stagger + application map (button, overlay, tab, list).
„Rhythm & Phasing“: Kaskaden- und Reversibilitätsschemata.
„Reduce Motion“: Degradationsregeln und Beispiele.
„Do/Don't“: kurze Clips mit Zeitcodes und Zielmetriken (INP/First Feedback).

Kurze Zusammenfassung

Ein gutes Timing ist eine sofortige Reaktion, eine verständliche Choreographie und sparsame Kurven. Halten Sie kurze Zeitdauern für Mikro-Zustände, dehnen Sie nur dort, wo es Sinn macht, pflegen Sie Reduce-Motion und animieren Sie keine „teuren“ Eigenschaften. Dann fühlt sich die Schnittstelle lebendig und zuverlässig an - besonders in Echtzeit- und High-Stakes-Szenarien.