Bewegung (Motion)

Was macht Bewegung (Motion)?

Bewegung erklärt Veränderung und bestätigt Eingaben. Wenn sie keines von beidem tut, ist sie Dekoration und braucht einen Grund.

1. Soll es animieren?

Wie oft der Benutzer es sieht	Entscheidung
100+ Mal am Tag (Shortcuts, Palette-Umschaltung, Tippen)	Niemals animieren
Dutzende Male (Hover, Listennavigation, Tabs)	Winzig oder gar nicht (Farbe/Deckkraft unter 150 ms)
Gelegentlich (Modal, Drawer, Toast, Dropdown)	Standard-Übergang
Selten (Onboarding, Erfolg, erstes Held-Element)	Raum für Freude

Niemals tastaturausgelöste Aktionen animieren.

2. Easing

• Eintreten oder Verlassen: starkes ease-out cubic-bezier(.23, 1, .32, 1).
• Bewegen auf dem Bildschirm: ease-in-out cubic-bezier(.77, 0, .175, 1).
• Drawer/Blätter: cubic-bezier(.32, .72, 0, 1).
• Farbe/Hover: ease. Dauerbewegung (Laufband, Fortschritt): linear.
• Niemals ease-in für UI; es fühlt sich träge an in dem Moment, in dem der Benutzer hinschaut.

3. Dauer

Drücken 100-160ms · Tooltip 125-200ms · Dropdown 150-250ms · Modal/Drawer 200-400ms · Marketing-Held bis zu 800ms. Ausgänge ~20% schneller als Eingänge. UI-Bewegung bleibt unter 300ms.

4. Handwerksregeln

• Nur transform und opacity animieren. Niemals width, height, top, left oder transition: all.
• Nichts erscheint aus scale(0); beginnen bei scale(.95) + opacity: 0.
• Popover und Menüs skalieren von ihrem Auslöser (transform-origin am Auslöser). Modals bleiben zentriert.
• Buttons: :active { transform: scale(.97) } mit einem 120ms Übergang.
• Tooltips: den ersten verzögern (~400ms); benachbarte öffnen sofort.
• Listen um 30-50ms pro Element staffeln, die Gesamtdauer auf unter 400ms begrenzen.
• Scroll-Enthüllungen: höchstens eine pro Seite, kleiner Abstand (8-16px), einmal ausführen. Nicht in jedem Abschnitt.
• Federn (Motion/Framer, React Spring) für Ziehen, Gesten und unterbrechbare Bewegung: { type: "spring", duration: .4, bounce: .15 }. Halten Sie das Prellen bei 0.1-0.3, und nur auf spielerischen Oberflächen.
• Bevorzugen Sie CSS-Übergänge und @starting-style für einfaches Ein-/Ausblenden; die View Transitions API für Seiten-/Zustandsveränderungen; eine JS-Bibliothek nur, wenn Gesten oder Sequenzen sie benötigen.

5. Reduzierte Bewegung (erforderlich)

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

Deckkraftänderungen und Zustandsfarben beibehalten; Bewegung, Parallaxe und Schütteln entfernen.

Überprüfungsformat

Wenn Sie Bewegungs-Code überprüfen, antworten Sie mit einer Tabelle: | Vorher | Nachher | Warum |, eine Zeile pro Problem.