# Motion-Design-Prinzipien für alle, die nicht animieren

[Canonical HTML page](https://gradiently.design/de/guide/motion-design-principles)

Du musst kein Animator sein, um Bewegung zu machen, die sich richtig anfühlt. Du brauchst ein paar Prinzipien, eine Handvoll Dauern und die Disziplin, weniger zu nutzen.

## The short version

- Gutes Motion Design beruht auf fünf Prinzipien: Gib jeder Bewegung einen Zweck, stimm ihr Timing ab, nutze Easing, ordne sie nach Wichtigkeit und setz so wenig wie möglich ein.
- Kleine Bewegungen in Oberflächen fühlen sich meist zwischen etwa 150 und 300 Millisekunden richtig an, größere Bewegungen und Auftritte brauchen länger.
- Was hereinkommt, sollte abbremsen, was hinausgeht, sollte beschleunigen, und endlose Loops sollten sich in gleichmäßigem Tempo bewegen.
- Bewegen sich mehrere Elemente, sollte sich das wichtigste zuerst bewegen, und immer nur eines sollte führen.
- Ein kleines Bewegungssystem aus drei Dauern und zwei oder drei Easing-Kurven hält die Bewegung einer Marke in jedem Stück einheitlich.

**Motion-Design-Prinzipien** sind die Faustregeln, die Bewegung natürlich statt zufällig wirken lassen. Die klassische Figurenanimation hat ihre berühmten zwölf, aufgeschrieben von den Disney-Animatoren Frank Thomas und Ollie Johnston in *The Illusion of Life*. Für Designarbeit wie Posts, Websites, Logos und Präsentationen leisten fünf fast die ganze Arbeit: **Zweck, Timing, Easing, Hierarchie und Zurückhaltung**. Du kannst sie nutzen, ohne je eine Animations-App zu öffnen.

## Zweck: Jede Bewegung sollte eine Aufgabe haben

Bewegung ist laut. Alles, was sich bewegt, zieht den Blick an, also behauptest du mit jeder Bewegung, dass etwas gerade jetzt wichtig ist. Bevor du animierst, benenne die Aufgabe. Wenn du das nicht kannst, lass es stillstehen.

### Bewegung mit Aufgabe

- Lenkt den Blick auf das eine, was zuerst gelesen werden soll
- Zeigt, woher etwas kam oder wohin es ging
- Bestätigt eine Aktion: gesendet, gespeichert, hinzugefügt
- Setzt mit einem langsamen Hintergrund eine Stimmung

### Bewegung um ihrer selbst willen

- Jedes Element hüpft beim Erscheinen herein
- Text, der sich weiterbewegt, während du ihn liest
- Drehende Logos und pulsierende Buttons
- Übergänge, die dich warten lassen

## Timing: wie lange Bewegung dauern sollte

Die Dauer ist das Prinzip, das die meisten falsch machen, meist zu langsam bei kleinen Dingen und zu schnell bei großen. Zwei Regeln helfen. Kleine, häufige Bewegungen sollten schnell sein, weil man sie ständig sieht. Bewegungen, die weiter reisen oder mehr verändern, sollten länger dauern, weil das Auge Zeit zum Folgen braucht.

| Art der Bewegung | Typische Dauer | Warum |
| --- | --- | --- |
| Feedback bei Buttons und Schaltern | Etwa 100 bis 200 ms | Fühlt sich sofort an, bleibt aber sichtbar |
| Kleine Änderungen in der Oberfläche, Menüs | Etwa 200 bis 300 ms | Schnell genug, um niemanden aufzuhalten |
| Große Panels, Seitenwechsel | Etwa 300 bis 500 ms | Mehr Strecke braucht mehr Zeit |
| Text, der in einen Post oder ein Video kommt | Etwa 0,4 bis 1 s | Lang genug, um als Auftritt wahrgenommen zu werden |
| Hintergrund, der im Loop treibt | Viele Sekunden pro Zyklus | Stimmung, keine Information: Er sollte kaum auffallen |

Gängige Startbereiche aus Interface- und Motion-Arbeit. Teste auf dem echten Gerät und passe an.

Ein nützlicher Test: Wenn Leute die Animation selbst bemerken statt dessen, was sie zeigt, ist sie zu langsam oder zu groß. Wenn sie die Änderung ganz verpassen, ist sie zu schnell.

## Easing: warum sich nichts mit konstantem Tempo bewegen sollte

Echte Gegenstände beschleunigen und bremsen ab. Bewegung mit einem konstanten Tempo, linear genannt, wirkt mechanisch, weil sich nichts auf der Welt so bewegt. Easing-Kurven fügen Beschleunigung und Abbremsen hinzu, und die richtige zu wählen ist einfach, sobald du drei Fälle kennst.

- **Hereinkommen: Ease-out.** Schnell ankommen und sanft zur Ruhe kommen, wie ein Auto, das vorfährt. Die meisten Auftritte nutzen das.
- **Hinausgehen: Ease-in.** Sanft starten und davonziehen. Abgänge dürfen auch kürzer sein als Auftritte.
- **Bewegung innerhalb des Bildes: Ease-in-out.** Sanft starten und sanft stoppen.
- **Loops und Drehungen: linear.** Durchgehende Bewegung sollte ein gleichmäßiges Tempo halten, sonst scheint sie an der Nahtstelle zu stocken.

```css
.panel-enter {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);  /* ease out */
}
.panel-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);  /* ease in, and shorter */
}
.background-drift {
  animation: drift 20s linear infinite;                    /* steady loop */
}
```

Die drei Fälle in CSS. [Easing erklärt](https://gradiently.design/de/guide/easing) geht tiefer auf die Kurven ein.

## Hierarchie: Das Wichtige bewegt sich zuerst

Bewegung erzeugt eine Lesereihenfolge, so wie Größe und Gewicht in einem stehenden Design. Was sich zuerst bewegt, wird zuerst gelesen. Wenn mehrere Elemente animiert sind, staffle sie nach Wichtigkeit, mit einer kurzen Pause von etwa 50 bis 150 Millisekunden dazwischen, und lass immer nur ein Element führen. [Visuelle Hierarchie](https://gradiently.design/de/guide/visual-hierarchy) behandelt die stehende Version derselben Idee.

Eine Hochformat-Story, die die Frühlingskollektion ankündigt, mit kleinem Label darüber und einer Detailzeile darunter

In einer animierten Version dieser Story kommt zuerst die Überschrift, dann das Datum, dann die Details. Der Hintergrund behält darunter sein eigenes langsames Tempo.

1. **Der Hintergrund kommt zur Ruhe** Das Feld bewegt sich schon langsam, wenn der Post erscheint. Es setzt die Stimmung, ohne gelesen werden zu wollen.
2. **Die Überschrift tritt auf** Ein klarer Auftritt mit Ease-out, in unter einer Sekunde.
3. **Die Nebenzeilen folgen** Label und Details kommen kurz danach, in Lesereihenfolge, mit kleinerer Bewegung.
4. **Alles hält an** Die Worte stoppen und bleiben lange genug stehen, um gelesen zu werden. Nur der Hintergrund bewegt sich weiter.

## Zurückhaltung: weniger Bewegung, als du denkst

Erst Stillstand gibt Bewegung Bedeutung. Wenn sich alles bewegt, sticht nichts heraus, und das Design wirkt nervös. Wähl eine führende Bewegung pro Stück, halte Wege kurz und lass Worte stehen, sobald sie angekommen sind. Bei Zurückhaltung geht es auch um Menschen: Manche empfinden Bewegung als unangenehm oder bekommen davon sogar Übelkeit, deshalb sollte jedes Stück auch mit ausgeschalteter Bewegung funktionieren. [Reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion) erklärt, wie du das einplanst.

> **Der Standbild-Test** Halte deine Animation auf einem beliebigen Frame an. Wenn dieser Frame nicht wie ein fertiges Design aussieht, überdeckt die Bewegung ein schwaches Layout.

## Konsistenz: ein kleines Bewegungssystem

Marken halten Farben und Schriften einheitlich; Bewegung verdient dieselbe Sorgfalt. Schreib ein winziges System auf und nutze es immer wieder: drei Dauern, zwei oder drei Easing-Kurven und eine Hausbewegung für Hintergründe. So erfindet nicht jedes neue Stück sein eigenes Tempo, und deine Bewegung wird wiedererkennbar, so wie es [Bewegung für statische Marken](https://gradiently.design/de/guide/motion-for-still-brands) beschreibt.

```css
:root {
  --motion-quick: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-quick: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}
```

Ein Bewegungssystem als Design-Tokens. Alles nutzt diese Namen, und reduzierte Bewegung verkürzt sie alle an einer Stelle.

Wende dieselben Prinzipien an, wenn du ein Logo, einen Post oder einen Website-Hero animierst. [Animierte Logos](https://gradiently.design/de/guide/animated-logo) und [animierte Posts](https://gradiently.design/de/guide/animated-social-posts) zeigen sie in Aktion.

## FAQ

### Was sind die Grundprinzipien des Motion Designs?

Für Designarbeit decken fünf das meiste ab: Gib jeder Bewegung einen Zweck, wähl eine sinnvolle Dauer, nutze Easing, ordne Bewegung nach Wichtigkeit und setz so wenig Bewegung wie möglich ein.

### Wie lange sollte eine Animation dauern?

Kleines Feedback in Oberflächen funktioniert meist bei etwa 100 bis 300 Millisekunden, größere Bewegungen bei etwa 300 bis 500 Millisekunden und Textauftritte in Posts oder Videos bei etwa einer halben bis einer ganzen Sekunde.

### Welches Easing sollte ich nutzen?

Ease-out für Dinge, die hereinkommen, Ease-in für Dinge, die hinausgehen, Ease-in-out für Bewegung innerhalb des Bildes und linear für endlose Loops.

### Was sind die 12 Prinzipien der Animation?

Es sind Prinzipien der Figurenanimation, die die Disney-Animatoren Frank Thomas und Ollie Johnston in The Illusion of Life beschrieben haben. Timing und Easing, bei ihnen Slow in und Slow out genannt, lassen sich am direktesten auf Motion im Design übertragen.