Come avere più transizioni CSS su un elemento?

È una domanda piuttosto semplice, ma non riesco a trovare una documentazione molto buona sulle proprietà di transizione CSS. Ecco lo snippet 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); } 

Come puoi vedere, le proprietà di transizione si sovrascrivono. Così com’è, l’ombreggiatura del testo si animerà, ma non il colore. Come faccio a renderli entrambi animati simultaneamente? Grazie per qualsiasi risposta.