Comment avoir plusieurs transitions CSS sur un élément?

C'est une question assez simple mais je ne trouve pas de très bonne documentation sur les propriétés de transition CSS. Voici l'extrait CSS:

    .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);
}

Comme vous pouvez le voir, les propriétés de transition se remplacent. En l'état, l'ombre du texte s'anime, mais pas la couleur. Comment les faire animer simultanément? Merci pour toutes les réponses.

Les propriétés de transition sont délimitées par des virgules dans tous les navigateurs prenant en charge les transitions:

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

easeest la fonction de synchronisation par défaut, vous n'avez donc pas à la spécifier. Si vous voulez vraiment linear, vous devrez le spécifier:

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

Cela commence à devenir répétitif, donc si vous utilisez les mêmes temps et fonctions de synchronisation sur plusieurs propriétés, il est préférable d'aller de l'avant et d'utiliser les différentes transition-*propriétés au lieu de la sténographie:

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

Vous pouvez également tout simplement de manière significative avec:

.nav a {
    -webkit-transition: all .2s;
}

Quelque chose comme ce qui suit permettra plusieurs transitions simultanément:

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

Exemple: http://jsbin.com/omogaf/2

Si vous faites en sorte que toutes les propriétés soient animées de la même manière, vous pouvez les définir séparément, ce qui vous permettra de ne pas répéter le code.

 transition: all 2s;
 transition-property: color, text-shadow;

Il y a plus à ce sujet ici: raccourci de transition CSS avec plusieurs propriétés?

J'éviterais d'utiliser la propriété all (la propriété de transition écrase «all»), car vous pourriez vous retrouver avec un comportement indésirable et des résultats de performance inattendus.

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

Voici un mixin MOINS pour la transition de deux propriétés à la fois:

.transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) {
 -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
    -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
      -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
          transition: @transition1 @transition1-duration, @transition2 @transition2-duration;
}

Il est possible de définir plusieurs transitions avec des valeurs différentes pour la durée, le retard et la fonction de synchronisation. Pour diviser différentes transitions, utilisez,

button{
  transition: background 1s ease-in-out 2s, width 2s linear;
  -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}

Référence: https://kolosek.com/css-transition/

Il est également possible d'éviter de spécifier complètement les propriétés.

#box {
  transition: 0.4s;
  position: absolute;
  border: 1px solid darkred;
  bottom: 20px; left: 20px;
  width: 200px; height: 200px;
  opacity: 0;
}

#box.on {
  opacity: 1;
  height: 300px;
  width: 500px;
 }