---
url: "/fr/bannerify/animation/selecting-animations.md"
description: "Choisissez parmi des dizaines d’animations prédéfinies à base de keyframes pour les calques de vos bannières."
---

# Choisir des animations

> Choisissez parmi des dizaines d’animations prédéfinies à base de keyframes pour les calques de vos bannières.

### Tutoriel vidéo : animez et exportez vos bannières en HTML depuis Figma

Cette vidéo montre comment animer et exporter en quelques secondes des bannières HTML prêtes pour la production depuis Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## Animations {#animations}

Bannerify propose des dizaines d’animations prédéfinies à base de keyframes, réparties en 5 catégories :

- Entrées (Entrances)
- Sorties (Exits)
- Transformations de base (Basic Transforms)
- Effets d’accroche (Attention Seekers)
- Panoramiques d’arrière-plan (Background Pans)

> **Tip:** **Utiliser les animations Split Text**. Bannerify inclut aussi un ensemble dédié d’animations par caractère, par mot et par ligne pour les calques de texte compatibles. Consultez [Animations Split Text](/fr/bannerify/animation/split-text) pour la configuration, les polices compatibles et les limites actuelles.

> **Tip:** **Utiliser les animations natives Figma Motion**. Choisissez une animation détectée dans le groupe **Figma Motion** d’un calque, ou choisissez **Apply Each Layer's Figma Motion** dans le menu d’entrée **Batch Layer Actions**. Une fois Motion appliqué à au moins un calque, activez **Mirror Figma Motion Timings** au-dessus de la timeline si vous souhaitez aussi reprendre les décalages de timing natifs de Figma. Consultez [Utiliser les animations Figma Motion](/fr/bannerify/animation/figma-motion) pour la procédure d’activation complète et les propriétés prises en charge.

> **Tip:** **Retirer les animations d’un calque**. Si vous ne voulez aucune animation sur un calque, vous pouvez choisir **No Entry Animation** et/ou **No Exit Animation**, ou renommer le calque Figma avec le préfixe **locked-** (par exemple _locked-RectangleBackground_). Aucune animation n’est alors ajoutée, et la liste de sélection des animations est également désactivée dans la timeline du plugin.

## Ajouter des animations d’entrée {#adding-entry-animations}

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

Pour définir une **animation d’entrée**, survolez le calque à animer dans la timeline de Bannerify et cliquez sur la **liste de sélection du haut**. Faites défiler la liste des animations et **cliquez** sur le nom d’une animation pour l’appliquer à votre calque. L’aperçu de la bannière se met à jour instantanément avec la nouvelle animation.

## Ajouter des animations de sortie {#adding-exit-animations}

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

Les **animations de sortie** s’ajoutent de la même façon que les animations d’entrée : au lieu de cliquer sur la liste de sélection du haut, cliquez sur la **liste de sélection du bas** pour choisir une animation de sortie pour votre calque.

> **Note:** Assurez-vous que toute animation de sortie définie sur un calque **commence _après_ la fin de l’animation d’entrée**. Sinon, les deux animations se chevauchent et leurs transitions entrent en conflit.