---
url: "/fr/bannerify/animation/editing-keyframe-properties.md"
description: "Personnalisez les propriétés X, Y, Scale, Rotation et Opacity de vos keyframes."
---

# Modifier les propriétés des keyframes

> Personnalisez les propriétés X, Y, Scale, Rotation et Opacity de vos keyframes.

### 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)

[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.