Comment puis-je animer des propriétés personnalisées CSS pour afficher/masquer plusieurs éléments de manière séquentielle ?

Animation de propriétés/variables personnalisées CSS

Problème :

L'animation de plusieurs éléments avec des propriétés personnalisées CSS (variables) n'est pas Ne fonctionne pas comme prévu. Le résultat souhaité est que les divs internes apparaissent et disparaissent en séquence à l'aide d'une variable pour contrôler l'opacité.

Solution :

Propriétés CSS avec types personnalisés :

Introduisez un type personnalisé pour la variable à l'aide de @property, qui permet au navigateur de comprendre le type de données de la variable et activer l'animation progressive :

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

Animation avec propriété personnalisée :

Utilisez la propriété personnalisée dans les images clés de l'animation :

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

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

Dans ce Par exemple, l'arrière-plan de l'élément html est animé de complètement transparent à partiellement opaque en fonction de la variable --opacity, qui est progressivement interpolée au fil du temps.

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!