---
url: "/de/bannerify/animation/editing-keyframe-properties.md"
description: "Passe die Eigenschaften X, Y, Scale, Rotation und Opacity deiner Keyframes an."
---

# Keyframe-Eigenschaften bearbeiten

> Passe die Eigenschaften X, Y, Scale, Rotation und Opacity deiner Keyframes an.

### 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)

[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.