Comment puis-je animer en douceur des propriétés CSS personnalisées ?

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

Visant à animer plusieurs divs internes de manière synchrone, un développeur a tenté d'utiliser des variables CSS mais a rencontré des problèmes. Bien que les variables CSS puissent être utilisées dans les animations, le problème réside dans le comportement inattendu de transitions abruptes au lieu d'interpolations fluides.

La solution implique l'utilisation de la règle @property, qui définit le type de variable animée. Dans ce cas, l'opacité est spécifiée sous forme de nombre, permettant au navigateur de la percevoir comme telle et de faciliter une animation progressive.

Exemple de code :

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

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

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

Dans Dans cet exemple, la variable d'opacité est explicitement définie comme un nombre et la propriété d'animation fadeIn utilise des variables CSS pour obtenir l'effet de transition progressive souhaité sur l'opacité d'arrière-plan de l'élément HTML.

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!