Comment puis-je animer plusieurs instances d'une propriété personnalisée CSS à l'aide d'une seule animation ?

Animation de propriétés personnalisées en CSS

En CSS, les propriétés personnalisées, également appelées variables CSS, offrent un mécanisme robuste pour définir et réutiliser le style. valeurs tout au long d’un projet. Ils offrent la possibilité de modifier dynamiquement une propriété de style en fonction d'une valeur ou d'une variable prédéfinie. Cependant, lorsqu'il s'agit d'animations, les propriétés personnalisées peuvent parfois poser des problèmes.

L'un de ces défis survient lorsque l'on tente d'animer plusieurs instances d'une propriété particulière à l'aide d'une seule animation. En tirant parti des propriétés personnalisées, les développeurs visent à ce que toutes les instances ultérieures soient affectées par la même animation. Cependant, dans certains cas, une seule instance subit l'animation souhaitée, tandis que les instances restantes restent inchangées.

Comprendre les propriétés personnalisées dans les animations

Le problème découle du principe fondamental comportement des propriétés personnalisées dans les animations. Lorsqu'elles sont définies à l'aide de la syntaxe CSS traditionnelle, les propriétés personnalisées sont traitées comme des valeurs statiques pendant l'animation. Cela signifie que les valeurs des propriétés ne sont pas interpolées sur la durée de l'animation, ce qui entraîne un changement soudain plutôt qu'une transition progressive.

Solution : Utiliser la règle @property

Pour surmonter cette limitation, les développeurs peuvent utiliser la règle @property en conjonction avec des propriétés personnalisées. La règle @property permet de définir des variables en spécifiant leurs types et en fournissant des valeurs initiales. En déclarant une propriété personnalisée sous forme de nombre, par exemple, le navigateur peut interpréter la propriété comme une valeur numérique et permettre des transitions et des animations fluides.

Exemple de mise en œuvre :

Prenons l'exemple suivant, dans lequel nous visons à créer un élément div clignotant à l'aide d'une propriété personnalisée pour l'opacité :

@property --opacity {
  syntax: '<number>'; /* Define as type number for transition */
  initial-value: 0;
  inherits: false;
}

@keyframes fadeIn {
  50% {--opacity: 1}
}

#test {
  width: 100px;
  height: 200px;
  background-color: black;
  animation: fadeIn 1s infinite;
}

#test div {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--opacity);
}

Utilisation de ceci approche, la propriété personnalisée --opacity est définie comme un nombre, permettant à l'animation d'interpoler la valeur d'opacité en douceur sur la durée de l'animation, obtenant ainsi l'effet de clignotement souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!