--- url: "/de/bannerify/animation/custom-keyframes.md" description: "Fehlt dir eine Animation in den Presets von Bannerify, erstell deine eigene mit Keyframes und eigenen Werten für X, Y, Scale, Rotation und Opacity." --- # Eigene Keyframe-Animationen erstellen > Fehlt dir eine Animation in den Presets von Bannerify, erstell deine eigene mit Keyframes und eigenen Werten für X, Y, Scale, Rotation und Opacity. ### Video-Tutorial: Eigene Animationen zu deinen Banner-Designs in Figma hinzufügen Dieses Video zeigt, wie du mit dem Bannerify-Plugin eigene Keyframe-Animationen zu deinen Bannern hinzufügst. [Embedded media](https://www.youtube-nocookie.com/embed/Js4uSQ855uo) ## Das Panel für eigene Animationen öffnen {#opening-the-custom-animations-panel} [Video](/assets/videos/bannerify/animation/opening-panel.mp4) Um das Panel für eigene Animationen zu öffnen, klick im Hauptkopfbereich von Bannerify auf den Button **Custom Animations**. Daraufhin öffnet sich das Panel, in dem du deine eigene Keyframe-Animation anlegen kannst. ## Keyframes für eigene Animationen erstellen {#creating-custom-animation-keyframes} [Video](/assets/videos/bannerify/animation/keyframes.mp4) Wenn du das Animations-Panel öffnest, siehst du 2 Keyframes: den ersten Keyframe (0 %) und den letzten Keyframe (100 %). Sie sind standardmäßig vorhanden und lassen sich nicht entfernen, denn eine Keyframe-Animation braucht mindestens einen Frame, mit dem sie beginnt, und einen Keyframe, der zeigt, wo sie endet. ### Einen Keyframe zum Bearbeiten auswählen {#selecting-a-keyframe-to-edit} Du wechselst sofort zwischen beliebigen Keyframes, indem du auf der Spur **Keyframes** oben im Panel 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 Start- und Endpunkt einen Keyframe hinzuzufügen, gib seinen Prozentwert (zum Beispiel **50**) in das Feld **Add at** ein und wähle dann **Add**. Jeder neue Keyframe wird automatisch mit denselben Eigenschaften erstellt, die dein aktuell ausgewählter Keyframe hat. So kannst du Eigenschaften ausgehend von bereits hinzugefügten Keyframes anpassen. Nachdem du auf **Add** geklickt hast, ist der neue Keyframe außerdem automatisch ausgewählt. ## Keyframe-Eigenschaften bearbeiten {#editing-keyframe-properties} [Video](/assets/videos/bannerify/animation/editing-properties.mp4) 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 beim Keyframe 0 % auf 2x und beim Keyframe 100 % auf 1x, entsteht automatisch eine „Schrumpf“-Animation. - Die Eigenschaft **X** animiert die horizontale Position deines Elements (in Pixeln). - Die Eigenschaft **Y** animiert die vertikale Position deines Elements (in Pixeln). - 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. ### Relative X/Y-Transformationen in Prozent nutzen {#using-percentage-based-relative-x-y-transforms} Möchtest du die X/Y-Position lieber als Prozentsatz des animierten Elements festlegen, stell in den Keyframe-Eigenschaften die Einheit für **Position** von **px** auf **%** um. Dann kannst du für deine X/Y-Werte einen Prozentwert festlegen (statt Pixeln). Ein prozentualer X/Y-Transformationswert animiert das Element, auf das die Animation angewendet ist, automatisch ausgehend von seiner Position und wendet die prozentuale Transformation auf seine Größe an. Ein X-Transformationswert von `10%` auf einem Keyframe bewegt zum Beispiel eine `100px` breite Ebene um `10px`. Wendest du dieselbe Animation mit einem X-Transformationswert von `10%` auf eine `200px` breite Ebene an, bewegt sich die Ebene um `20px`. ### Die Skalierung in X- und Y-Skalierung aufteilen {#splitting-scale-into-x-y-scale-options} Möchtest du die Skalierung für die X- und die Y-Achse einzeln festlegen, stell in den Keyframe-Eigenschaften den Modus für **Scale** von **Uniform** auf **X / Y** um. Dann kannst du die horizontale und die vertikale Skalierung deiner Keyframes unabhängig voneinander festlegen, statt beide gleichmäßig für eine einheitliche Vergrößerungs- oder Verkleinerungsanimation zu skalieren. Diese Einstellung ist praktisch, wenn du die Breite oder Höhe einer Ebene animieren willst, ohne gleichzeitig die andere Achse zu beeinflussen. ## Die Animation in der Live-Vorschau ansehen {#using-the-live-preview-to-see-your-animation} [Video](/assets/videos/bannerify/animation/live-preview-speeds.mp4) Wie deine Animation mit den aktualisierten Keyframes und Eigenschaften aussieht, siehst du im Bereich **Live preview** neben deinen Keyframe-Eigenschaften. Alle Änderungen an Keyframes, Eigenschaften oder Easing erscheinen automatisch in der Live-Vorschau. > **Tip:** **Du kannst die Wiedergabegeschwindigkeit der Live-Vorschau anpassen.** Wenn du sehen willst, wie deine eigene Animation bei unterschiedlichen Geschwindigkeiten aussieht, zieh den Schieberegler **Duration** unter der Vorschau. Damit legst du fest, wie viele Sekunden ein Durchlauf der Vorschau dauert. ## Keyframe-Eigenschaften kopieren und einfügen {#copying-and-pasting-keyframe-properties} [Video](/assets/videos/bannerify/animation/copy-paste-keyframe.mp4) Um Eigenschaften von einem Keyframe auf einen anderen zu übertragen, wähle zuerst den Keyframe aus, dessen Eigenschaften du kopieren willst, und klick auf **Copy**. Wähle dann den Keyframe aus, in den du die kopierten Eigenschaften einfügen willst, und klick auf **Paste**, um sie auf den ausgewählten Keyframe zu übertragen. Du kannst auch mit der rechten Maustaste auf einen Keyframe klicken und **Copy Properties** oder **Paste Properties** wählen. > **Note:** **Kopierte Eigenschaften sind nur verfügbar, bis das Panel geschlossen wird.** Solange das Panel für eigene Animationen geöffnet ist, kannst du Eigenschaften von und zu beliebigen Keyframes deiner Animationen kopieren und einfügen. Nachdem du das Panel für eigene Animationen geschlossen hast, lassen sich kopierte Eigenschaften nicht mehr einfügen. ## Keyframes löschen {#deleting-keyframes} [Video](/assets/videos/bannerify/animation/deleting-keyframe.mp4) Um einen Keyframe zu löschen, klick auf der Spur **Keyframes** auf den gewünschten Keyframe, um ihn auszuwählen, und dann auf den Button **Delete** (oder klick mit der rechten Maustaste auf den Keyframe und wähle **Delete Keyframe**), um ihn aus der Zeitleiste zu entfernen. Beachte, dass du die Keyframes **0%** und **100%** _nicht_ löschen kannst, da deine Animations-Zeitleiste diese Standard-Keyframes braucht. 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 endgültig weg.** Wenn du einen deiner Keyframes löschst, wird er dauerhaft aus der Zeitleiste entfernt, und du kannst das Löschen nicht rückgängig machen. Du kannst aber die Eigenschaften eines Keyframes mit **Copy** kopieren, ihn löschen und die Eigenschaften dann in einen anderen Keyframe einfügen, solange du deine Animations-Zeitleiste noch bearbeitest. ## Das Easing der Animation festlegen {#setting-the-animation-easing} [Video](/assets/videos/bannerify/animation/changing-easing.mp4) Welches Easing deine Animation haben soll, legst du über eine Option im Menü **Easing** fest. Das Easing gilt automatisch für deine gesamte Zeitleiste und aktualisiert den Bereich **Live preview**, sodass du siehst, wie das gewählte Easing die Bewegung deiner Keyframe-Animation verändert. Folgende Easing-Optionen stehen zur Auswahl: - Ease (Standard) - Ease out - Ease in - In and out - Linear - Gentle - Overshoot - Anticipate ### Einen eigenen Cubic-Bezier-Wert für das Easing festlegen {#setting-a-custom-cubic-bezier-easing-value} ### Video-Tutorial: Cubic-Bezier-Easing zu Banner-Animationen in Figma hinzufügen Dieses Video zeigt, wie du mit dem Bannerify-Plugin eigenes Cubic-Bezier-Easing zu Banner-Animationen in Figma hinzufügst. [Embedded media](https://www.youtube-nocookie.com/embed/uS2TRRQiYzw) Für eine eigene Kurve ziehst du die Anfasser der Kurve im Menü **Easing** oder fügst einen gültigen CSS-cubic-bezier-Wert (zum Beispiel `cubic-bezier(0.65,0.05,0.36,1);`) in das Feld unter den Presets ein. Eine eigene Cubic-Bezier-Kurve kannst du mit einer Website wie [https://easings.co/](https://easings.co/) oder einem anderen Dienst deiner Wahl erzeugen, der dir hilft, eigene CSS-cubic-bezier-Kurven zu erstellen. ## Den Ursprungspunkt der Animation festlegen {#setting-the-animation-origin-point} [Video](/assets/videos/bannerify/animation/origin-point.mp4) Standardmäßig liegt der Ursprung aller deiner eigenen Animationen auf der X- und Y-Achse bei `Center` und `Center`. Du kannst ihn aber anpassen, indem du auf einen der neun Punkte im Raster **Origin point** klickst. Es kombiniert `Top`, `Center` oder `Bottom` für die vertikale Achse mit `Left`, `Center` oder `Right` für die horizontale Achse. Der Ursprung der Animation bestimmt, an welcher Stelle die Animation an der Ebene „fixiert“ ist. Setzt du den Ursprung zum Beispiel auf `Top` und `Left`, wird dieser Punkt deiner Ebene zum Drehpunkt einer Rotationsanimation oder zu dem Punkt, von dem aus und zu dem hin die Ebene skaliert wird. ## Deine neue eigene Animation speichern {#saving-your-new-custom-animation} [Video](/assets/videos/bannerify/animation/adding-new-animation.mp4) Um deine neue Animation zu speichern, gib ihr im Textfeld **Animation name** einen Namen und klick dann auf den Button **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. Führst du Bannerify aber in einer ganz anderen oder neuen Figma-Datei aus, erscheinen deine gespeicherten Animationen dort _nicht_, denn sie werden direkt in der Figma-Datei gespeichert und lassen sich nicht in eine andere Datei übertragen. In neuen Figma-Dateien musst du neue Animationen erneut anlegen. Alternativ kannst du in der _aktuellen_ Figma-Datei eine neue _Seite_ anlegen, auf der deine gespeicherten eigenen Animationen aus dieser Datei weiterhin verfügbar sind. ## Deine gespeicherten eigenen Animationen nutzen {#using-your-saved-custom-animations} [Video](/assets/videos/bannerify/animation/using-custom-animation.mp4) Sobald du mindestens eine eigene Animation gespeichert hast, kannst du sie in deinen Bannern nutzen, indem du in den Zeitleisten deiner Ebenen auf die Auswahlfelder für **Eingangsanimationen** und **Ausgangsanimationen** klickst. Dort siehst du eine neue Gruppe namens **Custom Animations** mit allen eigenen Animationen, die du gespeichert hast. > **Tip:** **Eigene Animationen auf mehrere Ebenen anwenden:** Wie andere Preset-Animationen kannst du auch deine eigene Animation [gleichzeitig auf mehrere Ebenen anwenden](/de/bannerify/animation/animating-banners#applying-bulk-animations). ## Deine gespeicherten Animationen aktualisieren {#updating-your-saved-animations} [Video](/assets/videos/bannerify/animation/update-saved-keyframes.mp4) Um eine zuvor gespeicherte eigene Animation zu aktualisieren, wähle sie im Menü **Saved animations** aus. Die gespeicherte Animation wird dann mit ihren Keyframes in das Panel 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 aktualisierten Keyframes automatisch auf alle Ebenen deiner Banner angewendet, die diese eigene Animation bereits nutzen. > **Tip:** **Eine neue Animation auf Basis einer gespeicherten Animation erstellen.** Möchtest du eine gespeicherte Animation laden und ändern, ohne die gespeicherte Version zu „überschreiben“, gib einen neuen **Animation name** ein und klick auf den Button **Add New Animation**, um daraus eine neue Animation zu erstellen. ## Gespeicherte Animationen löschen {#deleting-your-saved-animations} [Video](/assets/videos/bannerify/animation/deleting-animation.mp4) Um eine Animation zu löschen, wähle unter **Saved animations** eine Option aus, um die Animation zu laden, und klick dann auf den Button **Delete Saved Animation**, um die gespeicherte Animation zu löschen. > **Warning:** **Eine gelöschte gespeicherte Animation ist endgültig weg und wird von deinen Ebenen entfernt.** Wenn du eine deiner gespeicherten Animationen löschst, wird sie dauerhaft aus der Liste **Saved animations** entfernt. Alle Ebenen in deinen Bannern, die die gelöschte eigene Animation genutzt haben, werden wieder auf **keine Animation** zurückgesetzt.