---
url: "/es/bannerify/animation/editing-keyframe-properties.md"
description: "Personaliza las propiedades X, Y, Scale, Rotation y Opacity de tus fotogramas clave."
---

# Editar las propiedades de los fotogramas clave

> Personaliza las propiedades X, Y, Scale, Rotation y Opacity de tus fotogramas clave.

### Tutorial en vídeo: añade animaciones personalizadas a tus diseños de banners en Figma

En este vídeo verás cómo añadir animaciones personalizadas con fotogramas clave a tus banners con el plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/Js4uSQ855uo)

[Video](/assets/videos/bannerify/animation/editing-properties.mp4)

Puedes editar 5 propiedades distintas en cualquiera de los fotogramas clave de tu animación. Cualquier diferencia de propiedades entre tus fotogramas clave se anima automáticamente. Por ejemplo, si defines la escala en 2x en el fotograma clave 0 % y en 1x en el fotograma clave 100 %, se crea automáticamente una animación que "encoge" el elemento.

- La propiedad **X** anima la posición horizontal del elemento (en píxeles).
- La propiedad **Y** anima la posición vertical del elemento (en píxeles).
- La propiedad **Opacity** anima el porcentaje de transparencia del elemento.
- La propiedad **Rotate** anima los grados de rotación del elemento.
- La propiedad **Scale** anima el tamaño del elemento.

## Usar transformaciones X/Y relativas basadas en porcentajes {#using-percentage-based-relative-x-y-transforms}

Si prefieres definir la posición X/Y en función de un porcentaje del elemento animado, puedes cambiar las unidades de **Position** de **px** a **%** en las propiedades del fotograma clave. Así podrás definir los valores X/Y en porcentaje (en lugar de en píxeles).

Al aplicar un valor de transformación X/Y en porcentaje, el elemento al que se aplica la animación se anima automáticamente a partir de su posición, aplicando la transformación porcentual a su tamaño. Por ejemplo, un valor de transformación X de `10%` en un fotograma clave desplaza `10px` una capa de `100px` de ancho. Si aplicas esa misma animación con un valor de transformación X de `10%` a una capa de `200px` de ancho, la capa se desplaza `20px`.

## Dividir la escala en opciones de escala X/Y {#splitting-scale-into-x-y-scale-options}

Si prefieres definir la escala de cada eje X/Y por separado, puedes cambiar el modo de **Scale** de **Uniform** a **X / Y** en las propiedades del fotograma clave. Así podrás definir los valores de "escala" horizontal y vertical de tus fotogramas clave de forma independiente, en lugar de escalar ambos por igual para una animación de ampliación o reducción uniforme.

Este ajuste te resultará útil si necesitas animar el ancho o el alto de una capa sin que afecte también al otro eje.