Pourquoi mes variables CSS ne s'animent-elles pas ?

Animer les propriétés/variables personnalisées CSS

Dans le but d'animer une série de divs internes à l'aide de variables CSS, un développeur a rencontré des difficultés. Malgré l'utilisation de @keyframes pour définir une animation, le résultat reste une boîte noire statique.

La solution : utiliser @property

Pour résoudre ce problème, les variables CSS doivent être défini à l'aide de @property. Cela permet de spécifier le type de la variable, permettant au navigateur de la reconnaître comme un Nombre, par exemple. Grâce à cette compréhension, le navigateur peut ensuite animer de manière transparente les transitions pour cette variable.

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 cet exemple, @property définit --opacity comme un nombre. Dans l'animation fadeIn, la propriété d'opacité augmente progressivement jusqu'à 1 à 50 %. Par la suite, la couleur d'arrière-plan de l'élément HTML passe en douceur à un noir semi-transparent en fonction de la variable --opacity.

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!