Comment faire fonctionner simultanément plusieurs transitions CSS sur un seul élément ?

Plusieurs transitions CSS sur un élément

Dans l'extrait HTML donné, les transitions CSS fournies semblent s'écraser les unes les autres, provoquant uniquement le effet d'ombre de texte à animer au survol. Pour activer les animations simultanées de couleur et d'ombre de texte, des ajustements sont nécessaires.

Solution :

1. Utiliser les propriétés de transition délimitées par des virgules :

Les propriétés de transition en CSS peuvent être délimitées par des virgules. En utilisant cette technique, vous pouvez spécifier plusieurs propriétés qui effectueront une transition indépendante. Voici comment mettre à jour le code :

.nav a {
  transition: color .2s linear, text-shadow .2s linear;
}

2. Spécifier explicitement la fonction de synchronisation linéaire :

Bien que la fonction de synchronisation linéaire soit la fonction par défaut, il est recommandé de la spécifier explicitement pour plus de clarté. Ajoutez la ligne suivante pour vous assurer que les deux transitions suivent une progression linéaire :

transition-timing-function: linear;

3. Utiliser les propriétés Transition-* (Facultatif) :

Pour les transitions complexes impliquant plusieurs propriétés, il est souvent plus propre d'utiliser les propriétés transition-* dédiées au lieu de la syntaxe abrégée. Voici un exemple :

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

Résultat :

Avec ces modifications, les propriétés de couleur et d'ombre de texte effectueront une transition fluide lorsque vous survolerez les éléments d'ancrage dans le Liste .nav. Les animations s'exécuteront simultanément et indépendamment, permettant un effet plus dynamique.

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!