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

Transitions CSS multiples sur un élément

En CSS, les transitions permettent des animations fluides en modifiant progressivement les valeurs des propriétés spécifiées au fil du temps. Cependant, lorsque plusieurs transitions sont appliquées au même élément, les transitions suivantes peuvent écraser les précédentes.

Considérez l'extrait de code CSS suivant :

.nav a {
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover {
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

Dans ce code, à la fois la couleur et les propriétés text-shadow ont des effets de transition définis. Le problème est que la deuxième transition écrase la première. En conséquence, l'animation texte-ombre se produit, mais pas l'animation couleur.

Pour résoudre ce problème et faire fonctionner les deux transitions simultanément, utilisez les propriétés de transition CSS conjointement. Voici comment :

Propriétés de transition délimitées par des virgules

Dans tous les navigateurs prenant en charge les transitions, les propriétés de transition peuvent être délimitées par des virgules. En séparant plusieurs propriétés par des virgules, les deux transitions peuvent être déclenchées en même temps.

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

Spécifier la fonction d'accélération

Par défaut, les transitions utilisent la fonction de synchronisation d'accélération. Si vous souhaitez utiliser une fonction de synchronisation différente, telle que linéaire, elle doit être explicitement spécifiée.

transition: color .2s linear, text-shadow .2s linear;

Raccourci des propriétés de transition

Pour une approche plus claire lors de l'utilisation de synchronisations et de fonctions de synchronisation identiques pour plusieurs propriétés, utilisez les propriétés transition-* au lieu du raccourci :

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

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!