@property en CSS : animer dégradés et propriétés personnalisées

@property en CSS déclare une propriété personnalisée avec un type, pour que le navigateur sache que --angle contient un angle ou que --tint contient une couleur. Une fois le type connu, il peut interpoler entre deux valeurs : vous pouvez donc animer ce que le CSS refuse normalement de bouger, comme les couleurs d’un dégradé, son angle ou la position d’un arrêt de couleur. Sans déclaration, une propriété personnalisée n’est qu’une chaîne, et une chaîne ne peut que sauter d’une valeur à la suivante.

Pourquoi les dégradés ne s’animent pas seuls

Essayez transition: background 0.4s sur un bouton dont l’état de survol remplace un linear-gradient() par un autre : rien ne s’adoucit, le nouveau dégradé apparaît d’un coup. Les dégradés sont des images, et la spécification considère background-image comme non interpolable : le navigateur n’a aucun moyen de fondre une image dans une autre.

Le contournement habituel consiste à surdimensionner l’arrière-plan et à faire glisser background-position, et c’est ainsi que sont construits la plupart des dégradés CSS animés. Ça marche, mais cela ne fait que déplacer un dégradé figé. Impossible de changer une couleur, de faire tourner un angle ou de pousser un arrêt. Les propriétés déclarées changent la donne, car ce qui est animé n’est plus l’image mais un nombre ou une couleur typés à l’intérieur. Le navigateur recalcule le dégradé à chaque image à partir de la valeur courante.

La syntaxe de @property

Une règle @property a trois descripteurs. syntax indique quel type de valeur est autorisé, inherits si les enfants reçoivent la valeur, et initial-value est utilisée quand rien d’autre ne la définit. Les trois sont obligatoires, sauf initial-value qui peut être omise quand la syntaxe est *. Si une partie obligatoire manque ou est erronée, le navigateur ignore toute la règle, sans rien dire.

@property --tint {
  syntax: '<color>';
  inherits: false;
  initial-value: #7c3aed;
}

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --stop {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

La valeur initiale doit être indépendante du calcul, ce qui signifie en pratique des unités absolues : 0deg, 40%, 12px et les couleurs hexadécimales conviennent, 2em ou var(--x) non. Définir inherits: false est en général ce qu’il faut pour l’animation, et évite au navigateur de propager la valeur dans l’arbre.

Animer une couleur de dégradé au survol

Voici le plus petit exemple utile. Le bouton utilise --tint comme seconde couleur, et l’état de survol ne change que --tint. Comme la propriété est déclarée en tant que couleur, la transition passe en douceur du violet au corail au lieu de sauter.

@property --tint {
  syntax: '<color>';
  inherits: false;
  initial-value: #7c3aed;
}

.button {
  background: linear-gradient(120deg, #1e1b4b 0%, var(--tint) 100%);
  transition: --tint 400ms ease;
}

.button:hover {
  --tint: #fb7185;
}

Pour d’autres traitements de boutons, voyez les boutons en dégradé CSS et les effets de dégradé au survol en CSS.

Faire tourner une bordure en dégradé conique

Un usage favori de @property est une bordure qui semble faire le tour d’une carte. Un dégradé conique part d’un angle : déclarer cet angle et l’animer de 0deg à 360deg fait tourner les couleurs. Deux arrière-plans font le travail : la couleur de la carte découpée à la padding box, et le dégradé conique découpé à la border box.

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0f0b1e, #0f0b1e) padding-box,
    conic-gradient(from var(--angle), #22d3ee, #7c3aed, #f472b6, #22d3ee) border-box;
  animation: spin 6s linear infinite;
}

@keyframes spin {
  to { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

Déplacer un arrêt de couleur

Un pourcentage déclaré permet à un arrêt de glisser. Utilisez-le pour un remplissage de progression, une mise en valeur qui balaie un titre ou un horizon qui monte au défilement. Ici, --stop déplace le point où le dégradé passe de l’encre au bleu canard.

@property --stop {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%;
}

.meter {
  background: linear-gradient(90deg, #0d9488 0%, #0d9488 var(--stop), #0f172a var(--stop));
  transition: --stop 600ms ease-out;
}

.meter[data-done] {
  --stop: 100%;
}

Déclarer depuis JavaScript

CSS.registerProperty() fait le même travail depuis un script. C’est pratique quand un design system déclare ses propriétés à l’exécution, ou quand une valeur n’est connue qu’après le chargement. Déclarer deux fois le même nom lève une erreur : protégez l’appel.

if ('registerProperty' in CSS) {
  try {
    CSS.registerProperty({
      name: '--angle',
      syntax: '<angle>',
      inherits: false,
      initialValue: '0deg',
    })
  } catch {
    // Already registered, which is fine.
  }
}

Prise en charge, replis et performances

@property fonctionne dans les versions actuelles de Chrome, Edge, Safari et Firefox ; Firefox a été le dernier à l’ajouter, en version 128. Consultez caniuse si vous prenez en charge des appareils plus anciens. Un navigateur qui ne comprend pas la règle traite --angle comme une propriété personnalisée ordinaire : votre dégradé s’affiche toujours à sa valeur de départ et ne bouge simplement pas. C’est un bon repli, à condition que l’image fixe paraisse aboutie.

1. 1

   Déclarez avant d’utiliser

   Placez chaque règle @property au premier niveau, hors des media queries, pour qu’elle s’applique partout.

2. 2

   Utilisez des syntaxes typées

   Choisissez <color>, <angle> ou <percentage>. Évitez * pour tout ce que vous comptez animer.

3. 3

   Faites la transition sur la propriété

   Écrivez transition: --tint 400ms, en nommant la propriété personnalisée plutôt que background.

4. 4

   Respectez le mouvement réduit

   Arrêtez les animations en boucle sous prefers-reduced-motion: reduce, comme le décrit prefers-reduced-motion.

5. 5

   Vérifiez l’image fixe

   Désactivez l’animation et assurez-vous que le dégradé au repos paraît toujours voulu.

Si le mouvement que vous voulez vit sur des publications sociales ou en vidéo plutôt que sur une page web, un Mark Gradiently porte déjà sa propre lumière et son mouvement lent, et Pro l’exporte en MP4, WebM ou GIF là où le navigateur prend en charge l’enregistrement, sans écrire d’images clés. Pour tout ce qui se passe sur le web, @property est l’outil le plus propre dont vous disposez. La référence MDN liste tous les descripteurs.