Como ter várias transições CSS em um elemento?
É uma pergunta bastante direta, mas não consigo encontrar uma documentação muito boa sobre as propriedades de transição CSS. Aqui está o trecho 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 você pode ver, as propriedades de transição são substituídas umas pelas outras. Como está, a sombra do texto será animada, mas não a cor. Como faço para os dois animarem simultaneamente? Obrigado por todas as respostas.