Comment puis-je obtenir des animations fluides avec plusieurs propriétés personnalisées CSS ?

Utilisation des propriétés CSS personnalisées pour une animation fluide

Lorsqu'ils tentent d'animer plusieurs éléments simultanément avec des propriétés CSS personnalisées, les utilisateurs rencontrent souvent des problèmes avec des changements brusques de propriétés au lieu de transitions fluides. Cet article explore une solution pour obtenir les effets d'animation souhaités.

Plutôt que de s'appuyer sur des variables, qui n'interpolent pas les valeurs dans les animations, une approche plus efficace consiste à utiliser les propriétés CSS définies à l'aide de @property. Cette méthode permet une déclaration explicite des types de propriétés, permettant au navigateur d'interpréter et d'animer avec précision des propriétés telles que --opacity sous forme de nombres.

Exemple d'implémentation

Pour démontrer cette technique, considérons le code suivant :

@property --opacity {
  syntax: '<number>'; /* Declaring type as 'number' for transition */
  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, la propriété personnalisée --opacity est définie comme un @property avec le type « numéro ». Cela permet au navigateur de reconnaître --opacity comme valeur numérique et de l'interpoler en douceur pendant les animations. L'animation d'image clé fadeIn augmente ensuite progressivement --opacity de 0 à 1 à la barre des 50 %, ce qui entraîne un effet de fondu fluide pour la couleur 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!