---
url: "/pt/bannerify/animation/custom-keyframes.md"
description: "Se precisar de uma animação que não está nas predefinições do Bannerify, crie a sua com keyframes e propriedades X, Y, Scale, Rotation e Opacity."
---

# Criar animações de keyframes personalizadas

> Se precisar de uma animação que não está nas predefinições do Bannerify, crie a sua com keyframes e propriedades X, Y, Scale, Rotation e Opacity.

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

## Abrir o painel de animações personalizadas {#opening-the-custom-animations-panel}

[Video](/assets/videos/bannerify/animation/opening-panel.mp4)

Para abrir o painel de animações personalizadas, clique no botão **Custom Animations** no cabeçalho principal do Bannerify. O painel de animações personalizadas é aberto, e você pode começar a adicionar sua própria animação de keyframes.

## Criar keyframes de animações personalizadas {#creating-custom-animation-keyframes}

[Video](/assets/videos/bannerify/animation/keyframes.mp4)

Ao abrir o painel de animações, você verá 2 keyframes: o primeiro (0%) e o último (100%). Eles são adicionados por padrão e não podem ser removidos, porque uma animação de keyframes precisa de pelo menos um quadro para iniciar a animação e de um keyframe que mostre onde ela termina.

### Selecionar um keyframe para editar {#selecting-a-keyframe-to-edit}

Para alternar na hora entre os keyframes, clique em um keyframe na faixa **Keyframes**, perto do topo do painel de animações personalizadas. Ao clicar em um keyframe, você pode editar as propriedades desse keyframe específico.

### Inserir novos keyframes {#inserting-new-keyframes}

Para adicionar um keyframe entre os pontos de início e fim padrão, digite a porcentagem dele (por exemplo, **50**) no campo **Add at** e selecione **Add**.

Todo novo keyframe que você adiciona é criado automaticamente com as mesmas propriedades do keyframe selecionado no momento; assim, você pode ajustar as propriedades com base em outros keyframes já adicionados. O novo keyframe também é selecionado automaticamente depois que você clica no botão **Add**.

## Editar as propriedades dos keyframes {#editing-keyframe-properties}

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

## Usar a pré-visualização ao vivo para ver a animação {#using-the-live-preview-to-see-your-animation}

[Video](/assets/videos/bannerify/animation/live-preview-speeds.mp4)

Para ver como a animação está ficando com os keyframes e as propriedades que você atualizou, observe a área **Live preview**, ao lado das propriedades dos keyframes. Qualquer alteração que você fizer nos keyframes, nas propriedades ou no easing aparece automaticamente na pré-visualização ao vivo.

> **Tip:** **Você pode ajustar a velocidade de reprodução da pré-visualização ao vivo**. Se quiser ver como sua animação personalizada fica em velocidades diferentes, arraste o controle deslizante **Duration** abaixo da pré-visualização para mudar quantos segundos cada repetição da pré-visualização leva.

## Copiar e colar propriedades de keyframes {#copying-and-pasting-keyframe-properties}

[Video](/assets/videos/bannerify/animation/copy-paste-keyframe.mp4)

Para copiar e colar propriedades de um keyframe para outro, selecione primeiro o keyframe do qual você quer copiar as propriedades e clique no botão **Copy**. Depois, selecione o keyframe em que você quer colar as propriedades copiadas e clique no botão **Paste** para aplicá-las ao keyframe selecionado. Você também pode clicar com o botão direito em um keyframe e escolher **Copy Properties** ou **Paste Properties**.

> **Note:** **As propriedades copiadas só ficam disponíveis até o painel ser fechado**. Você pode copiar e colar propriedades entre quaisquer keyframes das suas animações enquanto o painel de animações personalizadas estiver aberto; depois que você fechar o painel, as propriedades copiadas não poderão mais ser coladas.

## Excluir keyframes {#deleting-keyframes}

[Video](/assets/videos/bannerify/animation/deleting-keyframe.mp4)

Para excluir um keyframe, clique em qualquer keyframe na faixa **Keyframes** para selecioná-lo e depois clique no botão **Delete** (ou clique com o botão direito no keyframe e escolha **Delete Keyframe**) para removê-lo da linha do tempo. Observe que você _não pode_ excluir os keyframes de **0%** ou **100%**, porque eles são keyframes padrão obrigatórios na linha do tempo da animação.

Depois que você exclui um keyframe, o keyframe de **0%** é selecionado de novo automaticamente como o keyframe ativo para edição.

> **Warning:** **Excluir um keyframe da animação o remove permanentemente**. Quando você exclui um keyframe, ele é removido permanentemente da linha do tempo, e não é possível desfazer a exclusão. No entanto, enquanto ainda estiver editando a linha do tempo da animação, você pode usar **Copy** para copiar as propriedades de um keyframe, excluí-lo e depois colar as propriedades excluídas em outro keyframe.

## Definir o easing da animação {#setting-the-animation-easing}

[Video](/assets/videos/bannerify/animation/changing-easing.mp4)

Para escolher o tipo de easing que a sua animação deve ter, selecione uma opção no menu **Easing**. O easing é aplicado automaticamente a toda a linha do tempo e atualiza a área **Live preview**, para que você veja como o easing selecionado muda o movimento da animação de keyframes.

Você pode escolher entre estas opções de easing:

- Ease (Default)
- Ease out
- Ease in
- In and out
- Linear
- Gentle
- Overshoot
- Anticipate

### Definir um valor de easing Cubic Bezier personalizado {#setting-a-custom-cubic-bezier-easing-value}

### Vídeo tutorial: adicione easing cubic-bezier às animações de banners no Figma

Este vídeo mostra como adicionar easing cubic-bezier personalizado às animações de banners no Figma com o plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/uS2TRRQiYzw)

Para usar sua própria curva, arraste as alças da curva no menu **Easing** ou cole um valor CSS cubic-bezier válido (por exemplo, `cubic-bezier(0.65,0.05,0.36,1);`) no campo abaixo das predefinições. Para gerar uma curva cubic-bezier personalizada, use um site como [https://easings.co/](https://easings.co/) ou qualquer outro serviço on-line de sua preferência que gere curvas CSS cubic-bezier.

## Definir o ponto de origem da animação {#setting-the-animation-origin-point}

[Video](/assets/videos/bannerify/animation/origin-point.mp4)

Por padrão, a origem de todas as suas animações personalizadas é definida como `Center` e `Center` nos eixos X/Y, mas você pode personalizá-la clicando em um dos nove pontos da grade **Origin point**, que combina `Top`, `Center` ou `Bottom` no eixo vertical com `Left`, `Center` ou `Right` no eixo horizontal.

Mudar a origem da animação altera o ponto em que a animação fica “fixada” na camada. Por exemplo, definir a origem como `Top` e `Left` faz desse ponto da camada o eixo em torno do qual uma animação de rotação gira, ou o ponto a partir do qual a camada aumenta ou diminui de escala.

## Salvar sua nova animação personalizada {#saving-your-new-custom-animation}

[Video](/assets/videos/bannerify/animation/adding-new-animation.mp4)

Para salvar a nova animação, dê um nome a ela preenchendo o campo de texto **Animation name** e clique no botão **Add New Animation**.

> **Note:** **As animações personalizadas só ficam salvas e disponíveis no arquivo do Figma atual**. Salvar uma animação a deixa disponível em qualquer _página_ do seu arquivo do Figma _atual_. No entanto, as animações salvas _não_ aparecem se você executar o Bannerify em um arquivo do Figma diferente ou novo, porque elas são salvas diretamente no arquivo do Figma e não podem ser transferidas para outro arquivo. Você vai precisar recriar as animações em cada novo arquivo do Figma. Como alternativa, você pode criar uma nova _página_ no arquivo do Figma _atual_, onde as animações personalizadas salvas neste arquivo continuarão disponíveis.

## Usar as animações personalizadas salvas {#using-your-saved-custom-animations}

[Video](/assets/videos/bannerify/animation/using-custom-animation.mp4)

Depois de salvar pelo menos uma animação personalizada, você pode usá-la nos banners clicando nas caixas de seleção de **animações de entrada** e **animações de saída** na linha do tempo das camadas. Você verá um novo grupo nas opções da caixa de seleção chamado **Custom Animations**, com todas as animações personalizadas que você salvou.

> **Tip:** **Aplicar animações personalizadas em massa** Assim como as outras animações predefinidas, você também pode aplicar sua animação personalizada em massa usando o recurso de [aplicação em massa](/pt/bannerify/animation/animating-banners#applying-bulk-animations).

## Atualizar as animações salvas {#updating-your-saved-animations}

[Video](/assets/videos/bannerify/animation/update-saved-keyframes.mp4)

Para atualizar uma animação personalizada salva anteriormente, escolha a animação no menu **Saved animations**; a animação salva e os keyframes dela são carregados no painel de animações personalizadas.

Depois de escolher a animação salva, edite os keyframes e as propriedades como precisar. Quando estiver satisfeito com as alterações, clique no botão **Update Saved Animation** para salvá-las e _substituir_ os keyframes anteriores da animação.

Observe que, ao atualizar uma animação salva, os keyframes atualizados são aplicados automaticamente a todas as camadas dos seus banners que já usavam essa animação personalizada.

> **Tip:** **Criar uma nova animação a partir de uma animação salva**. Se quiser carregar uma animação salva e modificá-la sem “substituir” a versão salva, crie uma nova animação a partir dela digitando um novo **Animation name** e clicando no botão **Add New Animation**.

## Excluir as animações salvas {#deleting-your-saved-animations}

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

Para excluir uma animação, selecione qualquer opção em **Saved animations** para carregá-la e clique no botão **Delete Saved Animation** para excluir a animação salva.

> **Warning:** **Excluir uma animação salva a remove permanentemente, inclusive das suas camadas**. Quando você exclui uma animação salva, ela é removida permanentemente da lista **Saved animations**. Todas as camadas dos seus banners que usavam a animação personalizada excluída voltam a ficar **sem animação**.