---
url: "/pt/bannerify/animation/selecting-animations.md"
description: "Escolha entre dezenas de animações predefinidas com keyframes para as camadas dos seus banners."
---

# Selecionar animações

> Escolha entre dezenas de animações predefinidas com keyframes para as camadas dos seus banners.

### Vídeo tutorial: anime e exporte banners para HTML a partir do Figma

Este vídeo mostra como animar e exportar, em segundos, banners HTML prontos para produção a partir do Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## Animações {#animations}

O Bannerify vem com dezenas de animações predefinidas com keyframes, agrupadas em 5 categorias:

- Entrances (entradas)
- Exits (saídas)
- Basic Transforms (transformações básicas)
- Attention Seekers (chamadas de atenção)
- Background Pans (panorâmicas de fundo)

> **Tip:** **Usar animações Split Text**. O Bannerify também inclui um conjunto próprio de animações que dividem o texto em caracteres, palavras e linhas para as camadas de texto compatíveis. Veja [Animações Split Text](/pt/bannerify/animation/split-text) para conhecer as etapas de configuração, as fontes compatíveis e as limitações atuais.

> **Tip:** **Usar animações nativas do Figma Motion**. Escolha uma animação detectada no grupo **Figma Motion** de uma camada específica ou escolha **Apply Each Layer's Figma Motion** no menu de entrada **Batch Layer Actions**. Depois que o Motion for aplicado a pelo menos uma camada, ative **Mirror Figma Motion Timings** acima da linha do tempo se também quiser os deslocamentos de tempo nativos do Figma. Veja [Usar animações do Figma Motion](/pt/bannerify/animation/figma-motion) para conhecer todas as etapas de ativação e as propriedades compatíveis.

> **Tip:** **Remover as animações de uma camada**. Se você não quer que uma camada tenha animações, pode selecionar **No Entry Animation** e/ou **No Exit Animation** ou, como alternativa, renomear qualquer camada do Figma com o prefixo **locked-** (por exemplo, _locked-RectangleBackground_). Isso também garante que nenhuma animação seja adicionada e desativa o seletor de animações na linha do tempo do plugin.

## Adicionar animações de entrada {#adding-entry-animations}

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

Para definir uma **animação de entrada**, passe o mouse sobre a camada que você quer animar na linha do tempo do Bannerify e clique no **seletor superior**. Percorra a lista de animações e **clique** no nome de uma animação para aplicá-la à camada. A pré-visualização do banner é atualizada na hora com a nova animação aplicada.

## Adicionar animações de saída {#adding-exit-animations}

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

Adicionar **animações de saída** funciona da mesma forma que adicionar animações de entrada: em vez de clicar no seletor superior, clique no **seletor inferior** para selecionar uma animação de saída para a camada.

> **Note:** Garanta que qualquer animação de saída definida em uma camada **comece _depois_ que a animação de “entrada” terminar**. Caso contrário, as duas animações vão se sobrepor e ter transições conflitantes ao mesmo tempo.