---
url: "/es/bannerify/animation/selecting-animations.md"
description: "Elige entre decenas de animaciones predefinidas basadas en fotogramas clave para las capas de tus banners."
---

# Seleccionar animaciones

> Elige entre decenas de animaciones predefinidas basadas en fotogramas clave para las capas de tus banners.

### Tutorial en vídeo: Anima y exporta banners a HTML desde Figma

Este vídeo muestra cómo animar y exportar en segundos banners HTML listos para producción desde Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## Animaciones {#animations}

Bannerify incluye decenas de animaciones predefinidas basadas en fotogramas clave, agrupadas en 5 categorías:

- Entrances
- Exits
- Basic Transforms
- Attention Seekers
- Background Pans

> **Tip:** **Usar animaciones Split Text**. Bannerify también incluye un conjunto específico de animaciones que dividen el texto en caracteres, palabras y líneas para las capas de texto compatibles. Consulta [Animaciones Split Text](/es/bannerify/animation/split-text) para ver los pasos de configuración, las fuentes compatibles y las limitaciones actuales.

> **Tip:** **Usar animaciones nativas de Figma Motion**. Elige una animación detectada del grupo **Figma Motion** en una capa concreta, o elige **Apply Each Layer's Figma Motion** en el menú de entrada **Batch Layer Actions**. Cuando hayas aplicado Motion al menos a una capa, activa **Mirror Figma Motion Timings** encima de la línea de tiempo si también quieres los desfases de tiempo nativos de Figma. Consulta [Usar animaciones de Figma Motion](/es/bannerify/animation/figma-motion) para ver todos los pasos de activación y las propiedades compatibles.

> **Tip:** **Quitar las animaciones de una capa**. Si no quieres que una capa tenga animaciones, puedes seleccionar **No Entry Animation** o **No Exit Animation** (o ambas) o, como alternativa, cambiar el nombre de cualquier capa de Figma con el prefijo **locked-** (por ejemplo, _locked-RectangleBackground_). Así también te aseguras de que no se añada ninguna animación, y además se desactiva el selector de animaciones en la línea de tiempo del plugin.

## Añadir animaciones de entrada {#adding-entry-animations}

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

Para definir una **animación de entrada**, pasa el ratón por encima de la capa que quieres animar en la línea de tiempo de Bannerify y haz clic en el **selector de arriba**. Desplázate por la lista de animaciones y **haz clic** en el nombre de una animación para aplicarla a tu capa. Verás que la vista previa del banner se actualiza al instante con la nueva animación aplicada.

## Añadir animaciones de salida {#adding-exit-animations}

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

Las **animaciones de salida** se añaden igual que las de entrada: en lugar de hacer clic en el selector de arriba, haz clic en el **selector de abajo** para elegir una animación de salida para tu capa.

> **Note:** Asegúrate de que cualquier animación de salida de una capa **empiece _después_ de que termine la animación de entrada**; de lo contrario, ambas animaciones se solaparán y sus transiciones entrarán en conflicto al mismo tiempo.