---
url: "/pt/pitchdeck/design/keyframes.md"
description: "Se você precisa de uma animação que não está nas predefinições do Pitchdeck, crie a sua própria com keyframes de *x*, *y*, *scale*, *rotation* e *opacity*."
---

# Criar animações personalizadas com keyframes

> Se você precisa de uma animação que não está nas predefinições do Pitchdeck, crie a sua própria com keyframes de *x*, *y*, *scale*, *rotation* e *opacity*.

## Criar uma nova animação personalizada {#creating-a-new-custom-animation}

[Video](/assets/videos/pitchdeck/design/custom-animation-create.mp4)

Para abrir o painel de animações personalizadas, clique no botão **Custom Animations** no cabeçalho principal do Pitchdeck (no tamanho de janela Small, ele aparece como **Animations**). Isso abre o painel de animações personalizadas, onde você pode começar a adicionar a sua própria animação com keyframes.

Ao abrir o painel de animações, você vê 2 keyframes: o primeiro keyframe (0%) e o keyframe final (100%). Eles são adicionados por padrão e não podem ser removidos, porque uma animação com keyframes precisa de pelo menos um quadro de onde começar e de um keyframe que mostre onde ela termina.

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

Você pode alternar na hora entre os keyframes clicando em um deles na fileira de porcentagens de 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 padrão de início e fim, digite a porcentagem dele (por exemplo, **50**) e selecione **Insert New Keyframe**.

Todo keyframe novo é criado automaticamente com as mesmas propriedades do keyframe selecionado no momento; assim, você pode ajustar as propriedades com base em outros keyframes que já adicionou. O keyframe recém-adicionado também fica selecionado automaticamente depois que você clica no botão **Insert New Keyframe**.

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

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 “encolher”.

- A propriedade **X** anima a posição horizontal (esquerda/direita) do elemento, em pixels.
- A propriedade **Y** anima a posição vertical (cima/baixo) 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.

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

Você pode copiar e colar propriedades de um keyframe para outro: primeiro, selecione o keyframe de onde quer copiar as propriedades e clique no botão **Copy Properties**. Depois, selecione o keyframe em que quer colar as propriedades copiadas e clique no botão **Paste Properties** para colá-las no keyframe selecionado.

> **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ê fecha o painel, as propriedades copiadas não ficam mais disponíveis para colar.

### Excluir keyframes {#deleting-keyframes}

Para excluir um keyframe, clique nele na fileira de porcentagens de keyframes para selecioná-lo e depois clique no botão **Delete Keyframe** para removê-lo da linha do tempo. Você _não pode_ excluir os keyframes de **0%** e **100%**, porque eles são os keyframes padrão necessários para a 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 exclui permanentemente**. Quando você exclui um keyframe, ele é removido permanentemente da linha do tempo e não é possível desfazer a exclusão. Mas você pode usar **Copy Properties** em um keyframe, excluí-lo e depois colar as propriedades excluídas em outro keyframe enquanto ainda estiver editando a linha do tempo da animação.

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

Para ver como a animação está ficando com base nos keyframes e nas propriedades que você atualizou, olhe a área **Live Preview**, que fica ao lado das propriedades dos keyframes e logo abaixo da linha do tempo da animação. Todas as mudanças que você fizer nos keyframes, nas propriedades ou na suavização aparecem automaticamente na pré-visualização ao vivo.

> **Note:** **Você pode ajustar a velocidade de reprodução da pré-visualização ao vivo**. Para ver como a animação personalizada fica em velocidades diferentes, mude a velocidade de reprodução da pré-visualização arrastando o controle deslizante de velocidade abaixo de **Live Preview** para a esquerda ou para a direita, para diminuir ou aumentar a velocidade.

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

Você pode escolher o tipo de suavização da animação com uma opção da caixa de seleção **Easing**. A suavização é aplicada automaticamente a toda a linha do tempo e atualiza a área **Live Preview**, para você ver como a suavização escolhida muda o movimento da animação com keyframes.

Você pode escolher entre estas opções de suavização:

- Ease (padrão)
- Linear
- Ease In
- Ease Out
- Ease In Out

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

Para salvar a nova animação, dê um nome a ela preenchendo o campo de texto **New Custom Animation Name** e clique em **Add New Animation**

> **Note:** **As animações personalizadas só ficam salvas e disponíveis no _arquivo atual do Figma_** Salvar uma animação a deixa disponível em qualquer _página_ do seu arquivo _atual_ do Figma. Mas as animações salvas _não_ aparecem se você executar o Pitchdeck em outro arquivo do Figma, completamente diferente ou novo, porque elas ficam 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 _atual_ do Figma, onde as animações personalizadas salvas neste arquivo continuarão disponíveis.

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

Depois de salvar pelo menos uma animação personalizada, você pode usá-la nos seus slides selecionando uma camada na aba **Animations** e abrindo o seletor de animações dela (**All effects…** ou o menu **Animation**). No seletor, você vai ver a aba **Custom**, com todas as animações personalizadas que você salvou.

Assim como as outras animações predefinidas, você também pode aplicar a animação personalizada a várias camadas de uma vez [selecionando-as juntas](/pt/pitchdeck/design/animations#select-elements) na aba **Animations**.

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

[Video](/assets/videos/pitchdeck/design/custom-animation-update.mp4)

Para atualizar uma animação personalizada que você já salvou, escolha a animação na caixa de seleção **Your Saved Animations**. Isso carrega a animação salva e os keyframes dela 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 mudanças, clique no botão **Update Saved Animation** para salvá-las e _substituir_ os keyframes anteriores da animação.

Atualizar uma animação salva aplica automaticamente os keyframes atualizados a todas as camadas dos seus slides que já usavam a animação personalizada que você acabou de atualizar.

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

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

[Video](/assets/videos/pitchdeck/design/custom-animation-delete.mp4)

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

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