---
url: "/pt/bannerify/animation/editing-keyframe-properties.md"
description: "Personalize as propriedades X, Y, Scale, Rotation e Opacity dos seus keyframes."
---

# Editar as propriedades dos keyframes

> Personalize as propriedades X, Y, Scale, Rotation e Opacity dos seus keyframes.

### Vídeo tutorial: adicione animações personalizadas aos seus banners no Figma

Este vídeo mostra como adicionar animações de keyframes personalizadas aos seus banners com o plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/Js4uSQ855uo)

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

Você pode editar 5 propriedades diferentes em qualquer keyframe da animação. Qualquer diferença de propriedades entre os keyframes é animada automaticamente. Por exemplo, definir a escala como 2x no keyframe de 0% e como 1x no keyframe de 100% cria automaticamente uma animação de “encolhimento”.

- A propriedade **X** anima a posição horizontal do elemento (em pixels).
- A propriedade **Y** anima a posição vertical do elemento (em pixels).
- A propriedade **Opacity** anima a porcentagem de transparência do elemento.
- A propriedade **Rotate** anima a rotação do elemento em graus.
- A propriedade **Scale** anima o tamanho do elemento.

## Usar transformações X/Y relativas em porcentagem {#using-percentage-based-relative-x-y-transforms}

Se preferir definir a posição X/Y com base em uma porcentagem do elemento animado, mude a unidade de **Position** de **px** para **%** nas propriedades do keyframe. Assim, você pode definir valores percentuais para X/Y (em vez de pixels).

Ao aplicar um valor de transformação X/Y em porcentagem, o elemento que recebe a animação é animado automaticamente com base no próprio tamanho, aplicando a porcentagem a esse tamanho. Por exemplo, definir uma transformação X de `10%` em um keyframe move uma camada de `100px` de largura em `10px`. Aplicar a mesma animação, com a transformação X de `10%`, a uma camada de `200px` de largura move a camada em `20px`.

## Dividir a escala em opções de escala X/Y {#splitting-scale-into-x-y-scale-options}

Se preferir definir os valores de escala de cada eixo X/Y separadamente, mude o modo de **Scale** de **Uniform** para **X / Y** nas propriedades do keyframe. Assim, você define os valores de escala horizontal e vertical dos keyframes de forma independente, em vez de escalar os dois igualmente para uma animação uniforme de aumento ou redução.

Essa configuração é útil quando você precisa animar a largura ou a altura de uma camada sem afetar o outro eixo ao mesmo tempo.