Comment puis-je appliquer plusieurs transitions CSS à un seul élément ?

Transitions CSS multiples sur un élément

La propriété de transition CSS permet une animation fluide des styles d'éléments au fil du temps. Cependant, si plusieurs transitions sont appliquées au même élément, elles peuvent s'écraser les unes les autres, entraînant un comportement d'animation involontaire.

Solution :

Pour avoir plusieurs transitions CSS sur un élément, utilisez une liste délimitée par des virgules pour la propriété de transition. Cela informe le navigateur que les propriétés spécifiées doivent être transférées simultanément. Par exemple :

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

Par défaut, la fonction de synchronisation de transition est « facilité », qui fournit une courbe d'accélération et de décélération fluide. Si vous le souhaitez, vous pouvez spécifier explicitement la fonction de synchronisation à l'aide de la propriété transition-timing-function. Par exemple, pour utiliser une transition linéaire :

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

Pour une syntaxe concise, vous pouvez également séparer les propriétés de transition en propriétés individuelles :

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

Cette approche utilise la propriété transition-property pour spécifier les propriétés à animer, transition-duration pour définir la durée de l'animation et transition-timing-function pour définir la courbe d'animation.

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!