[解決済み] 1つの要素に複数のCSS遷移を持たせるには？

質問

とても簡単な質問なのですが、CSSのtransitionプロパティについて、あまり良いドキュメントが見当たりません。以下は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);
}

ご覧の通り、トランジションプロパティは互いに上書きされます。このままでは、テキストシャドウはアニメーションしますが、カラーはアニメーションしません。どうすれば両方を同時にアニメーションさせることができるのでしょうか？回答ありがとうございました。

どのように解決するのですか？

トランジションプロパティは、トランジションに対応しているすべてのブラウザでカンマ区切りになっています。

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

ease はデフォルトのタイミング関数なので、指定する必要はありません。もし、本当に linear を指定する必要があります。

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

これは繰り返しになるので、複数のプロパティで同じ時刻とタイミング関数を使用する場合は、さまざまな種類の transition-* プロパティを使用します。

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