---
url: "/pt/bannerify/animation/hover.md"
description: "Adicione estados de hover animados a qualquer camada da linha do tempo do Bannerify. Eles são incluídos em todas as exportações HTML do plugin."
---

# Adicionar estados de hover animados às camadas

> Adicione estados de hover animados a qualquer camada da linha do tempo do Bannerify. Eles são incluídos em todas as exportações HTML do plugin.

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

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

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

Para adicionar um estado de hover animado (nas exportações HTML) a qualquer camada da linha do tempo, ative a opção **Add Hover** e selecione uma animação de hover no menu suspenso que aparece. Para repetir a animação, ative a opção **Loop**. Para ajustar a velocidade da animação de hover, arraste o fim da barra de tempo do hover.

Para ver como a animação fica, passe o mouse sobre a camada na janela de pré-visualização do Bannerify.

> **Tip:** **Aplicar uma animação de hover a várias camadas**. Você também pode aplicar uma animação de hover em massa a várias camadas usando o recurso de [aplicação em massa](/pt/bannerify/animation/animating-banners#applying-bulk-animations).

## Adicionar estados de hover com transição {#adding-transitional-hover-states}

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

Se você quer fazer a transição entre dois estados diferentes (por exemplo, mudar as cores de um botão de CTA quando o mouse passa sobre ele), crie uma camada para o estado de “hover”, coloque-a acima da camada original e aplique a ela o estado de hover de entrada, para que ela apareça com uma transição sempre que o mouse passar sobre o elemento.