¿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.

Respuestas a la pregunta(7)

Su respuesta a la pregunta