---
url: "/fr/bannerify/animation/custom-keyframes.md"
description: "Besoin d’une animation absente des préréglages de Bannerify ? Créez votre propre animation avec des keyframes et des propriétés X, Y, Scale, Rotation et Opacity."
---

# Créer des animations par keyframes personnalisées

> Besoin d’une animation absente des préréglages de Bannerify ? Créez votre propre animation avec des keyframes et des propriétés X, Y, Scale, Rotation et Opacity.

### Tutoriel vidéo : ajouter des animations personnalisées à vos bannières Figma

Cette vidéo montre comment ajouter des animations par keyframes personnalisées à vos bannières avec le plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/Js4uSQ855uo)

## Ouvrir le panneau des animations personnalisées {#opening-the-custom-animations-panel}

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

Pour ouvrir le panneau des animations personnalisées, cliquez sur le bouton **Custom Animations** dans l’en-tête principal de Bannerify. Le panneau des animations personnalisées s’ouvre et vous pouvez commencer à ajouter votre propre animation par keyframes.

## Créer des keyframes d’animation personnalisées {#creating-custom-animation-keyframes}

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

Lorsque vous ouvrez le panneau des animations, vous voyez 2 keyframes : la première (0 %) et la dernière (100 %). Elles sont ajoutées par défaut et ne peuvent pas être supprimées, car une animation par keyframes a besoin d’au moins une image de départ et d’une keyframe qui indique où elle se termine.

### Sélectionner une keyframe à modifier {#selecting-a-keyframe-to-edit}

Vous pouvez passer instantanément d’une keyframe à l’autre en cliquant sur une keyframe de la piste **Keyframes**, en haut du panneau des animations personnalisées. Cliquer sur une keyframe vous permet de modifier les propriétés de cette keyframe précise.

### Insérer de nouvelles keyframes {#inserting-new-keyframes}

Pour ajouter une keyframe entre les points de début et de fin par défaut, saisissez son pourcentage (par exemple **50**) dans le champ **Add at**, puis sélectionnez **Add**.

Chaque nouvelle keyframe que vous ajoutez est automatiquement créée avec les mêmes propriétés que la keyframe actuellement sélectionnée ; vous pouvez ainsi ajuster les propriétés à partir des keyframes que vous avez déjà ajoutées. La keyframe ajoutée est aussi sélectionnée automatiquement après que vous avez cliqué sur le bouton **Add**.

## Modifier les propriétés des keyframes {#editing-keyframe-properties}

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

Vous pouvez modifier 5 propriétés différentes pour chacune des keyframes de votre animation. Toute différence de propriétés entre vos keyframes est animée automatiquement. Par exemple, une échelle de 2x sur la keyframe 0 % et une échelle de 1x sur la keyframe 100 % créent automatiquement une animation de « rétrécissement ».

- La propriété **X** anime la position horizontale (gauche/droite) de votre élément, en pixels.
- La propriété **Y** anime la position verticale (haut/bas) de votre élément, en pixels.
- La propriété **Opacity** anime le pourcentage de transparence de votre élément.
- La propriété **Rotate** anime l’angle de rotation de votre élément, en degrés.
- La propriété **Scale** anime la taille de votre élément.

### Utiliser des transformations X/Y relatives en pourcentage {#using-percentage-based-relative-x-y-transforms}

Si vous préférez définir la position X/Y en pourcentage de l’élément animé, passez l’unité **Position** de **px** à **%** dans les propriétés de la keyframe : vous pourrez alors saisir des valeurs X/Y en pourcentage (au lieu de pixels).

Une valeur de transformation X/Y en pourcentage anime automatiquement l’élément auquel l’animation est appliquée en partant de sa position et en appliquant le pourcentage à sa taille. Par exemple, une transformation X de `10%` sur une keyframe déplace de `10px` un calque de `100px` de large. La même animation, avec une transformation X de `10%`, appliquée à un calque de `200px` de large le déplace de `20px`.

### Séparer l’échelle en options X/Y {#splitting-scale-into-x-y-scale-options}

Si vous préférez définir l’échelle de chaque axe X/Y séparément, passez le mode **Scale** de **Uniform** à **X / Y** dans les propriétés de la keyframe : vous pourrez alors définir indépendamment les valeurs d’échelle horizontale et verticale de vos keyframes, au lieu de les mettre à l’échelle de façon identique pour un agrandissement ou une réduction uniforme.

Ce réglage est utile si vous devez animer la largeur ou la hauteur d’un calque sans modifier en même temps l’autre axe.

## Utiliser l’aperçu en direct pour voir votre animation {#using-the-live-preview-to-see-your-animation}

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

Pour voir le rendu de votre animation selon les keyframes et les propriétés que vous avez modifiées, regardez la zone **Live preview**, à côté des propriétés des keyframes. Toutes les modifications apportées à vos keyframes, à leurs propriétés ou à l’easing s’affichent automatiquement dans l’aperçu en direct.

> **Tip:** **Vous pouvez ajuster la vitesse de lecture de l’aperçu en direct**. Pour voir votre animation personnalisée à différentes vitesses, modifiez la vitesse de lecture de l’aperçu en direct en faisant glisser le curseur **Duration**, sous l’aperçu, afin de changer le nombre de secondes que dure chaque boucle.

## Copier-coller les propriétés des keyframes {#copying-and-pasting-keyframe-properties}

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

Vous pouvez copier-coller les propriétés d’une keyframe vers une autre : sélectionnez d’abord la keyframe dont vous voulez copier les propriétés, cliquez sur le bouton **Copy**, sélectionnez la keyframe sur laquelle vous voulez les coller, puis cliquez sur le bouton **Paste** pour coller les propriétés copiées sur la keyframe sélectionnée. Vous pouvez aussi faire un clic droit sur une keyframe et choisir **Copy Properties** ou **Paste Properties**.

> **Note:** **Les propriétés copiées ne restent disponibles que jusqu’à la fermeture du panneau**. Tant que le panneau des animations personnalisées est ouvert, vous pouvez copier et coller des propriétés depuis et vers n’importe quelle keyframe de vos animations. Une fois le panneau des animations personnalisées fermé, les propriétés copiées ne peuvent plus être collées.

## Supprimer des keyframes {#deleting-keyframes}

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

Pour supprimer une keyframe, cliquez sur n’importe quelle keyframe de la piste **Keyframes** pour la sélectionner, puis cliquez sur le bouton **Delete** (ou faites un clic droit sur la keyframe et choisissez **Delete Keyframe**) pour la supprimer de la timeline. Notez que vous _ne pouvez pas_ supprimer les keyframes **0%** et **100%**, car ce sont des keyframes par défaut indispensables à la timeline de votre animation.

Après la suppression d’une keyframe, la keyframe **0%** est automatiquement resélectionnée comme keyframe active à modifier.

> **Warning:** **Supprimer une keyframe d’animation la supprime définitivement**. Lorsque vous supprimez l’une de vos keyframes, elle est définitivement retirée de votre timeline et vous ne pourrez pas annuler la suppression. Vous pouvez toutefois copier (**Copy**) les propriétés d’une keyframe, la supprimer, puis coller ces propriétés dans une autre keyframe tant que vous modifiez encore la timeline de votre animation.

## Définir l’easing de l’animation {#setting-the-animation-easing}

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

Vous pouvez choisir le type d’easing de votre animation en sélectionnant une option dans le menu **Easing**. L’easing s’applique automatiquement à toute votre timeline et met à jour la zone **Live preview**, pour que vous voyiez comment l’easing choisi modifie le mouvement de votre animation par keyframes.

Vous pouvez choisir parmi les options d’easing suivantes :

- Ease (par défaut)
- Ease out
- Ease in
- In and out
- Linear
- Gentle
- Overshoot
- Anticipate

### Définir une valeur d’easing Cubic Bezier personnalisée {#setting-a-custom-cubic-bezier-easing-value}

### Tutoriel vidéo : ajouter un easing cubic-bezier aux animations de bannières dans Figma

Cette vidéo montre comment ajouter un easing cubic-bezier personnalisé aux animations de bannières dans Figma avec le plugin Bannerify.
[Embedded media](https://www.youtube-nocookie.com/embed/uS2TRRQiYzw)

Pour utiliser votre propre courbe, faites glisser les poignées de la courbe dans le menu **Easing**, ou collez une valeur CSS cubic-bezier valide (par exemple `cubic-bezier(0.65,0.05,0.36,1);`) dans le champ situé sous les préréglages. Vous pouvez générer une courbe cubic-bezier personnalisée avec un site comme [https://easings.co/](https://easings.co/), ou tout autre service en ligne de votre choix qui aide à générer des courbes CSS cubic-bezier.

## Définir le point d’origine de l’animation {#setting-the-animation-origin-point}

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

Par défaut, l’origine de toutes vos animations personnalisées est définie sur `Center` et `Center` pour les axes X/Y, mais vous pouvez la modifier en cliquant sur l’un des neuf points de la grille **Origin point**, qui combine `Top`, `Center` ou `Bottom` pour l’axe vertical avec `Left`, `Center` ou `Right` pour l’axe horizontal.

Modifier l’origine de l’animation change l’endroit où l’animation est « épinglée » sur le calque. Par exemple, si vous définissez l’origine sur `Top` et `Left`, ce point devient celui autour duquel pivote une animation de rotation, ou celui à partir duquel et vers lequel votre calque peut être agrandi ou réduit.

## Enregistrer votre nouvelle animation personnalisée {#saving-your-new-custom-animation}

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

Pour enregistrer votre nouvelle animation, donnez-lui un nom dans le champ de texte **Animation name**, puis cliquez sur le bouton **Add New Animation**.

> **Note:** **Les animations personnalisées ne sont enregistrées et disponibles que dans le fichier Figma actuel**. Une animation enregistrée est disponible sur toutes les _pages_ de votre fichier Figma _actuel_. En revanche, vos animations enregistrées _n’apparaîtront pas_ si vous lancez Bannerify dans un tout autre fichier Figma ou dans un nouveau fichier, car elles sont enregistrées directement dans le fichier Figma et ne peuvent pas être transférées vers un autre fichier. Vous devrez recréer vos animations dans chaque nouveau fichier Figma. Vous pouvez aussi créer une nouvelle _page_ dans le fichier Figma _actuel_, où vos animations personnalisées enregistrées dans ce fichier resteront disponibles.

## Utiliser vos animations personnalisées enregistrées {#using-your-saved-custom-animations}

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

Dès que vous avez enregistré au moins une animation personnalisée, vous pouvez l’utiliser dans vos bannières en cliquant sur les listes déroulantes des **animations d’entrée** et des **animations de sortie** dans la timeline de vos calques : un nouveau groupe d’options, **Custom Animations**, y affiche toutes les animations personnalisées que vous avez enregistrées.

> **Tip:** **Appliquer en masse des animations personnalisées.** Comme pour les autres animations prédéfinies, vous pouvez appliquer en masse votre animation personnalisée avec la fonctionnalité d’[application en masse](/fr/bannerify/animation/animating-banners#applying-bulk-animations).

## Mettre à jour vos animations enregistrées {#updating-your-saved-animations}

[Video](/assets/videos/bannerify/animation/update-saved-keyframes.mp4)

Pour mettre à jour une animation personnalisée enregistrée, choisissez-la dans le menu **Saved animations** : l’animation enregistrée et ses keyframes se chargent dans le panneau des animations personnalisées.

Une fois l’animation enregistrée choisie, modifiez vos keyframes et leurs propriétés selon vos besoins. Lorsque les modifications vous conviennent, cliquez sur le bouton **Update Saved Animation** pour les enregistrer et _remplacer_ les keyframes précédentes de l’animation.

Notez que la mise à jour d’une animation enregistrée applique automatiquement les keyframes modifiées à tous les calques de vos bannières qui utilisaient déjà cette animation personnalisée.

> **Tip:** **Créer une nouvelle animation à partir d’une animation enregistrée**. Pour charger une animation enregistrée et la modifier sans « remplacer » la version enregistrée, créez une nouvelle animation à partir de celle-ci : saisissez un nouveau nom dans **Animation name** et cliquez sur le bouton **Add New Animation**.

## Supprimer vos animations enregistrées {#deleting-your-saved-animations}

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

Pour supprimer une animation, sélectionnez une option sous **Saved animations** pour charger l’animation, puis cliquez sur le bouton **Delete Saved Animation** pour supprimer votre animation enregistrée.

> **Warning:** **Supprimer une animation enregistrée la supprime définitivement et la retire de vos calques**. Lorsque vous supprimez l’une de vos animations enregistrées, elle est définitivement retirée de la liste **Saved animations**. Tous les calques de vos bannières qui utilisaient l’animation personnalisée supprimée reviennent à l’état **sans animation**.