¿Cómo tener múltiples transiciones CSS en un elemento?

Es una pregunta bastante sencilla, pero no puedo encontrar muy buena documentación sobre las propiedades de transición de CSS. Aquí está el fragmento de 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);
}

Como puede ver, las propiedades de transición se sobrescriben entre sí. Tal como está, la sombra de texto se animará, pero no el color. ¿Cómo consigo que ambos se animen simultáneamente? Gracias por cualquier respuesta

Las propiedades de transición están delimitadas por comas en todos los navegadores que admiten transiciones:

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

easees la función de tiempo predeterminada, por lo que no tiene que especificarla. Si realmente lo desea linear, deberá especificarlo:

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

Esto comienza a ser repetitivo, por lo que si va a utilizar los mismos tiempos y funciones de temporización en varias propiedades, es mejor seguir adelante y usar las diversas transition-*propiedades en lugar de la abreviatura:

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

También puede simplemente significativamente con:

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

Algo como lo siguiente permitirá múltiples transiciones simultáneamente:

-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;

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

Si hace que todas las propiedades sean animadas de la misma manera, puede configurar cada una por separado, lo que le permitirá no repetir el código.

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

Aquí hay más información: ¿ abreviatura de transición CSS con múltiples propiedades?

Evitaría usar la propiedad all (la propiedad de transición sobrescribe 'all'), ya que podría terminar con un comportamiento no deseado y golpes de rendimiento inesperados.

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

Aquí hay un MENOS mixin para la transición de dos propiedades a la vez:

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

Es posible realizar las transiciones múltiples establecidas con diferentes valores de duración, retraso y función de temporización. Para dividir diferentes transiciones use,

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

Referencia: https://kolosek.com/css-transition/

También es posible evitar especificar las propiedades por completo.

#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;
 }