---
url: "/fr/bannerify/animation/animating-banners.md"
description: "Une fois vos frames Figma chargés dans Bannerify, animez n’importe quel calque de vos bannières avec les fonctionnalités de timeline du plugin."
---

# Animer vos bannières

> Une fois vos frames Figma chargés dans Bannerify, animez n’importe quel calque de vos bannières avec les fonctionnalités de timeline du plugin.

### Tutoriel vidéo : animer et exporter des 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)

## Sélectionner des animations {#selecting-animations}

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

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

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

Pour définir une **animation d’entrée**, survolez le calque à animer dans la timeline de Bannerify et cliquez sur la **liste déroulante du haut**. Parcourez 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.

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

## Prévisualiser les animations de vos bannières dans la timeline {#previewing-your-banner-animations-in-the-timeline}

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

Pour prévisualiser les animations de vos bannières, cliquez sur le bouton d’icône **Play**, et mettez la timeline en pause à tout moment avec le bouton d’icône **Pause**. Vous pouvez aussi relancer la lecture depuis le début avec le bouton d’icône **Restart**.

Cliquez sur la règle temporelle au-dessus des bannières, ou faites-la glisser, pour parcourir l’animation. La tête de lecture commune reste alignée avec les pistes de timing de toutes les bannières. Vous pouvez aussi parcourir l’animation depuis l’en-tête d’une bannière, partout où sa règle est affichée.

Utilisez **+**, **−**, le curseur de zoom ou un pincement à deux doigts sur le trackpad au-dessus de la règle ou des pistes de timing pour zoomer de **100 % à 1000 %**. Une fois zoomé, faites glisser la poignée bleue arrondie de la barre de défilement sous la règle pour vous déplacer vers la gauche ou la droite. Cliquez sur **Fit** pour afficher de nouveau toute la timeline. Ces commandes modifient l’affichage sans changer les timings des animations ni la durée de l’export. Consultez [zoomer et faire défiler la timeline](/fr/bannerify/animation/animation-speed-timing#zoom-and-scroll-the-timeline) pour toutes les commandes de navigation.

Pour une modification plus précise, utilisez [le magnétisme, les filtres de calques, les repères et les séquences de mouvement réutilisables](/fr/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline), ou [lisez en boucle une zone de travail](/fr/bannerify/animation/previewing-animations#loop-a-work-area) pendant que vous ajustez une transition.

## Timeline Settings {#timeline-settings}

Cliquez sur **Timeline Settings** dans l’en-tête. Le panneau s’ouvre sur **General** et comporte quatre onglets :

| Onglet | Commandes |
| --- | --- |
| **General** | Durée de la timeline, Magic Delays et Magic Speeds |
| **Timeline Tools** | [Lire en boucle une plage d’aperçu](/fr/bannerify/animation/previewing-animations#loop-a-work-area) et [ajouter des repères nommés](/fr/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) |
| **Motion Sequences** | [Enregistrer et réutiliser des animations coordonnées](/fr/bannerify/animation/animation-speed-timing#save-and-reuse-a-motion-sequence) |
| **Sync Timings** | [Copier les timings entre formats de bannière](/fr/bannerify/animation/animation-speed-timing#synchronise-timings-across-banner-sizes) |

**Snap**, le filtre de calques, **Zoom To Selection** et les commandes de réduction des groupes se trouvent dans **Timeline Settings → Timeline Tools**.

## Revoir et restaurer les modifications {#review-and-restore-edits}

Cliquez sur **History**, à côté des flèches Annuler/Rétablir, pour [parcourir les modifications de votre timeline](/fr/bannerify/animation/undo-redo). Choisissez une étape pour revenir en arrière ou avancer ; **Current** indique l’état actif. Toute nouvelle modification effectuée après un retour en arrière remplace la suite de l’historique.

## Ajuster la durée de la timeline {#adjusting-the-timeline-length}

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

Ouvrez **Timeline Settings → General**, choisissez une durée sous **Total Timeline Length**, puis cliquez sur **Update Timeline Length**. Les durées disponibles vont de 1 seconde à 3 minutes. La modification s’applique à toutes vos bannières ; les plages de timing qui dépassent une timeline plus courte sont ajustées pour y tenir.

Vous pouvez restaurer la durée et les timings précédents avec **Undo**, ou choisir une étape antérieure dans **History**. Consultez [ajuster la durée de la timeline](/fr/bannerify/animation/timeline-length).

## 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 déroulante du haut, cliquez sur la **liste déroulante 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 chevaucheront et leurs transitions entreront en conflit.

## Ajuster la vitesse et le timing des animations {#adjusting-animation-speeds-and-timings}

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

Pour ajuster la vitesse et le délai de vos animations, **cliquez** sur le **bord** gauche ou droit de la barre de timeline de votre calque, puis **maintenez le bouton enfoncé et faites glisser** la souris pour modifier la durée de l’animation et son point de début ou de fin.

Pour déplacer votre animation sur la timeline, **cliquez** au **milieu** de la barre de timeline de votre calque, puis **maintenez le bouton enfoncé et faites glisser** la souris vers la gauche ou la droite pour changer sa position dans la timeline.

> **Tip:** **Saisissez des valeurs de timing précises au clavier**. Si vous préférez ne pas utiliser la barre de timing, vous pouvez aussi définir la vitesse et le délai en cliquant sur la deuxième valeur de votre calque dans la timeline et en saisissant un nouveau nombre au clavier (par exemple *1.5*) pour définir le nombre de secondes.

## Animations en boucle {#looping-animations}

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

Si un calque porte une animation que vous voulez répéter à l’infini (même après la fin de la timeline de la bannière), activez l’interrupteur **Loop** à côté de l’animation sélectionnée. C’est pratique pour les animations très courtes qui se prêtent à une lecture en boucle (par exemple « Heartbeat », « Flicker » ou « Pulse »).

## Copier-coller des animations {#copy-pasting-animations}

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

Vous pouvez copier rapidement une animation d’un calque de la timeline à un autre avec les boutons **Copy** et **Paste**. Cliquez sur le bouton **Copy** pour copier l’animation, puis cliquez sur le bouton **Paste** de n’importe quel autre calque pour la coller.

> **Tip:** **Coller une animation copiée sur plusieurs calques.** Vous pouvez aussi appliquer en masse l’animation copiée à plusieurs calques avec la fonctionnalité d’[application en masse](/fr/bannerify/animation/animating-banners#applying-bulk-animations).

## Appliquer des animations en masse {#applying-bulk-animations}

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

Pour appliquer rapidement une animation à plusieurs calques en même temps, sélectionnez des calques à l’aide des cases à cocher situées à côté de chaque nom de calque (ou utilisez la fonctionnalité **Quick Select Layers**), puis définissez votre animation dans la zone qui s’ouvre en bas de la fenêtre du plugin. Lorsque l’animation vous convient, cliquez sur le bouton **Apply Animations to Selected Layers** pour appliquer la nouvelle animation à tous les calques sélectionnés.

## Sélectionner rapidement des calques similaires {#quick-selecting-similar-layers}

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

Si vous travaillez sur un jeu de bannières qui contiennent les mêmes éléments ou calques, vous pouvez utiliser le menu **Quick Select Layers** dans l’en-tête de Bannerify pour sélectionner automatiquement les calques similaires dans toutes vos bannières. C’est une excellente alternative au cochage manuel de chaque calque.

> **Tip:** **Exemple d’utilisation de Quick Select Layers.** Par exemple, si toutes vos bannières contiennent un calque nommé **CTA Button**, cliquez sur cette option pour cocher automatiquement tous les calques **CTA Button**. Vous pourrez ensuite **appliquer en masse** des animations à ce calque dans toutes vos bannières en même temps.

## Utiliser les délais et vitesses automatiques {#using-magic-delays-and-magic-speeds}

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

Ouvrez **Timeline Settings → General** et choisissez une valeur sous **Magic Delays** ou **Magic Speeds**. Cliquez sur **Apply To All Entry Animations** ou **Apply To All Exit Animations** pour l’appliquer à toutes vos bannières.

### Magic Delays {#magic-delays}

Choisissez un délai échelonné de 0,1 à 0,5 seconde. Les calques reçoivent des décalages de délai successifs tout en conservant la durée de leurs animations.

### Magic Speeds {#magic-speeds}

Choisissez une durée de 0,1 à 1 seconde. Les heures de début restent les mêmes, sauf si elles doivent être avancées pour tenir dans la timeline.

Chaque application constitue une étape de l’historique. Utilisez **Undo**, **Redo** ou le panneau **History** pour passer d’une modification à l’autre. Consultez [Magic Delays et Magic Speeds](/fr/bannerify/animation/magic-delays-speeds).