---
url: "/de/pitchdeck/design/keyframes.md"
description: "Wenn du eine bestimmte Animation brauchst, die es in den Animations-Presets von Pitchdeck nicht gibt, erstellst du mit eigenen Keyframes und den Eigenschaften *x*, *y*, *scale*, *rotation* und *opacity* deine eigene Zeitleistenanimation."
---

# Eigene Keyframe-Animationen erstellen

> Wenn du eine bestimmte Animation brauchst, die es in den Animations-Presets von Pitchdeck nicht gibt, erstellst du mit eigenen Keyframes und den Eigenschaften *x*, *y*, *scale*, *rotation* und *opacity* deine eigene Zeitleistenanimation.

## Neue eigene Animation erstellen {#creating-a-new-custom-animation}

[Video](/assets/videos/pitchdeck/design/custom-animation-create.mp4)

Um den Bereich für eigene Animationen zu öffnen, klick in der Hauptkopfzeile von Pitchdeck auf den Button **Custom Animations** (in der kleinen Fenstergröße heißt er **Animations**). Daraufhin öffnet sich der Bereich für eigene Animationen, in dem du deine eigene Keyframe-Animation anlegen kannst.

Wenn du den Animationsbereich öffnest, siehst du 2 Keyframes: den ersten Keyframe (0 %) und den letzten Keyframe (100 %). Diese werden standardmäßig angelegt und lassen sich nicht entfernen, denn eine Keyframe-Animation braucht mindestens einen Frame, an dem die Animation beginnt, und einen Keyframe, der zeigt, wo sie endet.

### Keyframe zum Bearbeiten auswählen {#selecting-a-keyframe-to-edit}

Du kannst jederzeit zwischen Keyframes wechseln, indem du in der Reihe der Keyframe-Prozentwerte oben im Bereich für eigene Animationen auf einen Keyframe klickst. Mit einem Klick auf einen Keyframe kannst du die Eigenschaften genau dieses Keyframes bearbeiten.

### Neue Keyframes einfügen {#inserting-new-keyframes}

Um zwischen dem standardmäßigen Start- und Endpunkt einen Keyframe hinzuzufügen, gib seinen Prozentwert ein (zum Beispiel **50**) und wähle **Insert New Keyframe**.

Jeder neue Keyframe wird automatisch mit denselben Eigenschaften angelegt wie der gerade ausgewählte Keyframe. So kannst du Eigenschaften auf Basis von Keyframes anpassen, die du bereits hinzugefügt hast. Nach dem Klick auf den Button **Insert New Keyframe** wird dein neuer Keyframe außerdem automatisch ausgewählt.

### Keyframe-Eigenschaften bearbeiten {#editing-keyframe-properties}

Für jeden Keyframe deiner Animation kannst du 5 verschiedene Eigenschaften bearbeiten. Alle Unterschiede in den Eigenschaften zwischen deinen Keyframes werden automatisch animiert. Setzt du zum Beispiel die Skalierung im 0-%-Keyframe auf 2x und im 100-%-Keyframe auf 1x, entsteht automatisch eine „schrumpfende“ Animation.

- Die Eigenschaft **X** animiert die horizontale Pixelposition deines Elements (links/rechts).
- Die Eigenschaft **Y** animiert die vertikale Pixelposition deines Elements (oben/unten).
- Die Eigenschaft **Opacity** animiert die Transparenz deines Elements in Prozent.
- Die Eigenschaft **Rotate** animiert die Drehung deines Elements in Grad.
- Die Eigenschaft **Scale** animiert die Größe deines Elements.

### Keyframe-Eigenschaften kopieren und einfügen {#copying-and-pasting-keyframe-properties}

Du kannst Eigenschaften von einem Keyframe in einen anderen kopieren: Wähle zuerst den Keyframe aus, dessen Eigenschaften du kopieren möchtest, und klick auf den Button **Copy Properties**. Wähle dann den Keyframe aus, in den du die kopierten Eigenschaften einfügen möchtest, und klick auf den Button **Paste Properties**, um sie in den ausgewählten Keyframe einzufügen.

> **Note:** **Kopierte Eigenschaften sind nur verfügbar, bis der Bereich geschlossen wird** Solange der Bereich für eigene Animationen geöffnet ist, kannst du Eigenschaften zwischen beliebigen Keyframes deiner Animationen kopieren und einfügen. Nachdem du den Bereich für eigene Animationen geschlossen hast, lassen sich kopierte Eigenschaften nicht mehr einfügen.

### Keyframes löschen {#deleting-keyframes}

Um einen Keyframe zu löschen, klick in der Reihe der Keyframe-Prozentwerte auf den gewünschten Keyframe, um ihn auszuwählen, und klick dann auf den Button **Delete Keyframe**, um ihn aus der Zeitleiste zu löschen. Beachte, dass du die Keyframes **0%** und **100%** _nicht_ löschen kannst, da diese Standard-Keyframes für deine Animationszeitleiste erforderlich sind.

Nachdem du einen Keyframe gelöscht hast, wird automatisch wieder der Keyframe **0%** als aktiver Keyframe zum Bearbeiten ausgewählt.

> **Warning:** **Ein gelöschter Keyframe ist dauerhaft weg**. Wenn du einen deiner Keyframes löschst, wird er dauerhaft aus deiner Zeitleiste entfernt, und du kannst das Löschen nicht rückgängig machen. Du kannst aber mit **Copy Properties** die Eigenschaften eines Keyframes kopieren, ihn löschen und die gelöschten Eigenschaften dann in einen anderen Keyframe einfügen, solange du deine Animationszeitleiste noch bearbeitest.

### Animation in der Live-Vorschau ansehen {#using-the-live-preview-to-see-your-animation}

Um zu sehen, wie deine Animation mit den angepassten Keyframes und Eigenschaften aussieht, schau in den Bereich **Live Preview**. Er befindet sich direkt neben deinen Keyframe-Eigenschaften und unmittelbar unter der Animationszeitleiste. Alle Änderungen an Keyframes, Eigenschaften oder Easing werden automatisch in der Live-Vorschau angezeigt.

> **Note:** **Du kannst die Wiedergabegeschwindigkeit der Live-Vorschau anpassen**. Wenn du sehen möchtest, wie deine eigene Animation bei unterschiedlichen Geschwindigkeiten wirkt, zieh den Geschwindigkeitsregler unter **Live Preview** nach links oder rechts, um die Wiedergabe langsamer oder schneller zu machen.

### Easing der Animation festlegen {#setting-the-animation-easing}

Welches Easing deine Animation haben soll, legst du über eine Option im Auswahlfeld **Easing** fest. Das Easing gilt automatisch für deine gesamte Zeitleiste und aktualisiert den Bereich **Live Preview**, damit du siehst, wie das gewählte Easing die Bewegung deiner Keyframe-Animation verändert.

Folgende Easing-Optionen stehen zur Auswahl:

- Ease (Standard)
- Linear
- Ease In
- Ease Out
- Ease In Out

### Neue eigene Animation speichern {#saving-your-new-custom-animation}

Um deine neue Animation zu speichern, gib ihr im Textfeld **New Custom Animation Name** einen Namen und klick dann auf **Add New Animation**

> **Note:** **Eigene Animationen werden nur in der _aktuellen Figma-Datei_ gespeichert und sind nur dort verfügbar** Eine gespeicherte Animation steht auf jeder _Seite_ deiner _aktuellen_ Figma-Datei zur Verfügung. Wenn du Pitchdeck in einer ganz anderen oder neuen Figma-Datei ausführst, erscheinen deine gespeicherten Animationen dort jedoch _nicht_, weil sie direkt in der Figma-Datei gespeichert werden und sich nicht in eine andere Datei übertragen lassen. In neuen Figma-Dateien musst du neue Animationen daher erneut erstellen. Alternativ kannst du in der _aktuellen_ Figma-Datei eine neue _Seite_ anlegen; dort stehen dir die gespeicherten eigenen Animationen dieser Figma-Datei weiterhin zur Verfügung.

### Gespeicherte eigene Animationen verwenden {#using-your-saved-custom-animations}

Sobald du mindestens eine eigene Animation gespeichert hast, kannst du sie in deinen Folien verwenden: Wähle im Tab **Animations** eine Ebene aus und öffne ihre Animationsauswahl (**All effects…** oder das Menü **Animation**). Dort findest du einen Tab **Custom** mit allen eigenen Animationen, die du gespeichert hast.

Wie bei den Preset-Animationen kannst du deine eigene Animation auch auf mehrere Ebenen gleichzeitig anwenden, indem du sie im Tab **Animations** [gemeinsam auswählst](/de/pitchdeck/design/animations#select-elements).

## Gespeicherte Animationen aktualisieren {#updating-your-saved-animations}

[Video](/assets/videos/pitchdeck/design/custom-animation-update.mp4)

Um eine bereits gespeicherte eigene Animation zu aktualisieren, wähle sie im Auswahlfeld **Your Saved Animations** aus. Die gespeicherte Animation wird dann mit ihren Keyframes in den Bereich für eigene Animationen geladen.

Danach kannst du Keyframes und Eigenschaften nach Bedarf bearbeiten. Wenn du mit den Änderungen zufrieden bist, klick auf den Button **Update Saved Animation**, um sie zu speichern und die bisherigen Keyframes der Animation zu _überschreiben_.

Beachte: Wenn du eine gespeicherte Animation aktualisierst, werden die geänderten Keyframes automatisch auf alle Ebenen in deinen Folien angewendet, die diese eigene Animation bereits verwenden.

> **Tip:** **Neue Animation auf Basis einer gespeicherten Animation erstellen**. Wenn du eine gespeicherte Animation laden und abwandeln möchtest, ohne die gespeicherte Version zu „überschreiben“, kannst du daraus eine neue Animation erstellen: Gib unter **New Custom Animation Name** einen Namen ein und klick auf den Button **Add New Animation**.

## Gespeicherte Animationen löschen {#deleting-your-saved-animations}

[Video](/assets/videos/pitchdeck/design/custom-animation-delete.mp4)

Um eine Animation zu löschen, wähle unter **Your Saved Animations** eine Option aus, um die Animation zu laden, und klick dann auf den Button **Delete Saved Animation**.

> **Warning:** **Eine gelöschte gespeicherte Animation ist dauerhaft weg und wird von deinen Ebenen entfernt**. Wenn du eine gespeicherte Animation löschst, wird sie dauerhaft aus der Liste **Your Saved Animations** entfernt. Alle Ebenen in deinen Folien, die diese eigene Animation verwendet haben, sind danach wieder **ohne Animation**.