實現多個CSS過渡效果的方法

Question

這是一個非常直接的問題，但是我找不到關於CSS過渡屬性的很好的文檔。以下是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);
}

如您所見，過渡屬性會互相覆蓋。目前，文字陰影會動畫顯示，但顏色不會。我該如何使它們同時動畫顯示？感謝任何答案。

Answer 1

編輯：我對是否刪除這篇文章感到猶豫。就理解CSS語法而言，讓人們知道all的存在是好的，根據CSS的結構，它可能比一百萬個單獨的聲明更可取。另一方面，它可能會有效能損耗，儘管我還沒有看到任何支持這個假設的資料。暫時我會保留它，但我希望人們意識到這是一種兩面性。

原始貼文：

你也可以簡單地使用以下程式碼：

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

FWIW：如果未指定，all是預設的，所以transition: .2s;也可以達到相同的效果。

Answer 2

在支援過渡效果的所有瀏覽器中，過渡屬性是用逗號分隔的：

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